[ScrollTrigger waiting for animation before leaving.]

16 hours ago, GSAP Helper said:

@webenaco_Dev I'm not sure I fully understand what you're trying to do here, but you might want to look at Observer plugin if you want to just sense scroll-like behavior and have total control of transitions, timing, etc. From what you described, you wanted to make sure some animation runs BEFORE the scroll-based animation is allowed to continue which means it can't logically be directly linked with the native scroll position, therefore you may want to remove native scroll altogether and just fire things off using Observer and use JS to "scroll" (but it's not really scrolling). 

 

Good luck!

thanks, suggesting me to approach Observer allowed me to find the solution!

[ScrollTrigger waiting for animation before leaving.]

On 7/25/2020 at 11:10 PM, ZachSaucier said:

Hey vesemir. As you likely found out, this isn't really a great use case for ScrollTrigger. 

 

You can immediately snap to a section like this 

 

 

Jumping over sections is an added step of not using ScrollTrigger's built in functionality. Honestly I'd likely just hook into the wheel event and do custom logic to show the navigated-to section.

Hi Zach Saucier,

I'm working on a project where I have a series of sections (e.g., "rooms" like your example) that I navigate through by scrolling. My goal is to add animations to elements within these sections that not only animate in as I scroll down to them but also perform a reverse animation as I'm about to leave the section to move on to the next one.

Here's the desired user experience:

I load the page, and the text in the first section animates in.
As I start scrolling down towards the second section, I want the text in the first section to perform an exit animation before the page actually moves to the next section.
Upon entering the second section, the text there animates in, and the process repeats for each subsequent section.

Is this achievable using ScrollTrigger? I'm looking for a way to trigger the exit animation of the current section's elements before scrolling into the next section, essentially giving control over the transition between sections. I'm using this code of yours as a start.

Any guidance or examples on how to implement this would be greatly appreciated.
Thank you in advance for your help!

[How to create this mouse hover animation?]

On 5/26/2023 at 9:06 PM, Cassie said:

There's a demo in the thread I linked to that does exactly what you're after
 

 

Hi, starting from this code is it possible to obtain the same effect without duplicating the text? Is there another approach that avoids duplicating textual content? Thank you

[pinning text on scroll horizontal]

Thanks @mvaneijgen, your tip on the clip path helped me find the solution!

 

[pinning text on scroll horizontal]

Hi everyone, starting from this example is it possible to "mask" the text in the section-1 step to make it change the color?

Here I attach an example https://www.aquapetra.com/ (by scrolling there is a text section with horizontal scroll) that I would like to replicate but I don't understand the logic behind doing this animation

thanks for any support

[Spinny flipz with carousel mode]

The alternative could be to make a Pin on the div that contains the wheel, complete the spin with the scroll and then continue with the next contents

[Spinny flipz with carousel mode]

Hi everyone, I need some support to edit this beautiful animation I would like the scrolling of the elements (cards) to be done through the horizontal scroll of the mouse as if it were a classic gallery carousel of images, and if possible with the grab, instead of with the vertical scroll. My problem in using this animation is due to the fact that I need to insert a section before and after the container that contains the cards. The current demo is only usable for a full screen one page being in position fixed.

See the Pen eYEXmJm by GreenSock (@GreenSock) on CodePen