Accordion tutorial?

Determined to learn Interactions. I’ve tried when I first got it. Hoped it would be easier now. Not so much. Help please

  1. Doing Accordion tutorial from documentation instructions.
    Got stuck after “Go to the Action list and click on Hide at start”. I can’t get back to “Action list and click on Interactions.” Help please.
  2. Moved to a slider from documentation. Do you have a parts of timeline names like tool tips? Some places have tool tips, others not. I’d like to see a visual timeline dissection. Obviously below is duplicating.
<div class="pgia-controls"><a class="prev pgia-control" href="#" data-scroll-to="prev" data-pg-ia='{"l":[{"name":"ScrollTo","trg":"click","a":{"l":[{"t":"^.pgia-slider|.pgia-slides-container","l":[{"t":"tween","p":0,"d":0.5,"l":{"scrollTo":{"dest":"prev_page"}}}]}]},"pdef":"true"}]}'>&lsaquo;</a>^.pgia-slider|.pgia-slides-container    ^.pgia-slider|.pgia-slides-container    ^.pgia-slider|.pgia-slides-container<a class="next pgia-control" href="#" data-scroll-to="next">&rsaquo;</a>
    <div class="pgia-pagination"><a class="pgia-pagination-item" href="#"></a>
    </div>
</div>

Hi @kat,

Can’t you just click on the “Interactions” at the top of the list at the left of the image? Looking at the tutorial now, I don’t exactly like the naming of the panels that was used. I guess it could be a bit ambiguous.

Does this work from the documentation? Timeline Editor | Pinegrow Web Editor
Cheers,
Bob

1 Like

ALL INTERACTIONS >INTERACTIONS Interactions > Seems both Hide At Start & Interaction have to be selected so both are blue.
Then the interactions panel & the Hide at start are both visible.
Do I need “Enable on” desktop or mobile selected?


  1. Target elements are selected with the [element selector control]
    Is the element selector control in the timeline the top insert box with the target circle?

Hi @kat,

Correct. They are separate things.

If you only want something hidden at the start on one or the other you can activate, otherwise it is hidden on both automatically.

Yup. But if you only have a single target that the Interaction is added to as a target you can use the Target input in the main Interactions options.
Cheers,
Bob

1 Like

3/4 of the way thru Booklers.

  1. A single animation can have multiple animations numbered 1, 2, 3…
    A single animation with only 1 animation also has a number 1, 2, 3…
    Trying to figure out which animation is what number is confusing. Clarification please.

  2. The Timeline remains open to whatever the last animation was. When I create a new animation on a new target I have to close the Timeline then click Edit Animation in the Animation planner. Seems a bit cumbersome. Do I have this correct?

Hi @kat,
I can’t find the specific set of instructions you are referring to with your first question. I see the tutorial is in sections. Can you narrow it down that way, please?

For your second question, you don’t have to close the previous animation, just click the edit animation button and it will swap out for the new one.

Hope this helps,
Bob

1 Like

Why Choose Booklers section doesn’t work.


Articles section does work

Hi @kat,
Are you sure the first section isn’t working? It might be that for your viewport that the animation happens a little fast so that when you are full in view the animation has already occurred. You can “fix” this by going to the main “Scroll Scene” interaction, clicking on the “Start and End” option, select “Describe”. For start select “Start” for “Scene elements” and “Center” for “…reaches the”. “End” doesn’t matter in this case, but I set “The” to “Center” and “…reaches scroller’s” to “Center”.
Let me know if this helps,
Bob

1 Like

https://mcgraphics.us/Booklers-Basic/
Interesting, but didn’t work.

Hi @kat,
From the page it looks like maybe your target is set incorrectly. Here is what mine looks like"


In my code the target output is:
image
Yours is (starting after the first “t”):

Good Luck,
Bob

1 Like

I am getting more comfortable with Interactions.

  1. ,“t”:".features-post" doesn’t work. Files online updated.
<div class="container py-5" data-pg-ia='{"l":[{"t":"h2","a":"fadeInUp"}]}' data-pg-ia-scene='{"s":"custom","s_t":"center","e_t":"center","l":[{"t":"h2","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0,"y":"100%"},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":1,"s":0.25,"l":{"autoAlpha":1,"y":"0%"},"e":"Power1.easeOut"}]}]},"p":"time"},{"t":".mb-5","a":"fadeInUp","p":"time"},{"a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"autoAlpha":0,"y":"100%"},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":1,"s":0.25,"l":{"autoAlpha":1,"y":"0%"},"e":"Power1.easeOut"}]}]},"p":"time","t":".features-post"}]}'>```

2. Only the first image rotates correctly. Instructions: reset the image position we should enter a number between 0 to 100. So let’s enter 50 on both.

Hi @kat,
I noticed that there is an interaction without trigger above your scroll scene, while this isn’t causing a big problem, it could create an error under some circumstances. Second, the start and end descriptions aren’t fully set.


This works for me. Adding “hide at start” to each on the columns will make it more visible.
Cheers,
Bob

1 Like

I deleted Interactions leaving Scroll Scene after watching your bookler tutorial again. Scrolling down section does not show but getting to bottom and then scrolling up shows section, but no interactions.
https://mcgraphics.us/Booklers-Basic Hide at Start on individual items, rather than container
You tutorial shows Enter. I don’t have an enter in my PG Scroll Scene

Hi @kat,
Two thoughts/suggestions.

  1. Try setting the “Start When” to match mine above. I think the animation is happening outside of the viewport. You can also try turning on the “reverse in opp. dir” and “replay every time” options for each of the animations.
  2. Download the finished project and take a look at how the animations there might differ from yours.

Cheers,
Bob

1 Like

Bookler-Finished doesn’t work either. The bottom section work well, but the middle section still doesn’t. Ah well on to slider.

What do the various interactions blue icons on the tree mean? Documentation url please.

Hmmm, can’t find where in the documentation they are, but:
This symbol means an interaction -
image
This symbol means “Apply to many” -
image
And this symbol means “Scroll scene”
image
Hide at start
image
Show at start
image
Bob

1 Like