Accordion tutorial?

[kat]

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>

[RobM]

Hi @kat,

@kat

I can’t get back to “Action list and click on Interactions.”

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.

@kat

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.

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

[kat]

@RobM

click on the “Interactions” at the top of the list at the left of the image?

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?

---

2. 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?

[RobM]

Hi @kat,

@kat

ALL INTERACTIONS >INTERACTIONS Interactions > Seems both Hide At Start & Interaction have to be selected so both are blue.

Correct. They are separate things.

@kat

Do I need “Enable on” desktop or mobile selected?

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

@kat

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?

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

[kat]

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?

[RobM]

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

[kat]

Why Choose Booklers section doesn’t work.

Articles section does work

[RobM]

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

[kat]

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

[RobM]

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:

Yours is (starting after the first “t”):

Good Luck,
Bob

[kat]

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.

[RobM]

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

[kat]

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

[RobM]

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

[kat]

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

[kat]

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

[RobM]

Hmmm, can’t find where in the documentation they are, but:
This symbol means an interaction -

This symbol means “Apply to many” -

And this symbol means “Scroll scene”

Hide at start

Show at start

Bob