Complete scrollTrigger animations on scroll up

[Claire]

Hello everyone, 

I'm trying to create a set of animations with GSAP (for example scale from 0, fade and scale from 0, etc.) and I wanted to make that by applying the name of the animation in a data-gsap attribute of an html element, this is applied on scroll.
I can't, with any configuration to make each animated element be at its original position when scrolling up (onLeave, onEnterBack, onLeaveBack for say), so I would like the animation to happen only once when scrolling down, I hope that I explained clearly.
 

What I did:
 

I create a function called "fromScale" where:

1. I take the array of all elements that have data-gsap="fromScale"
2. I create a forEach in which I take all possible data-gsap-* attributes that may have been assigned to the element in the markup (e.g. data-gsap-start, data-gsap-end, data-gsap-ease) and in case have not been indicated, I assign them some default values.
3. I create a variable containing the gsap-from with the animation
4. I create a standalone ScrollTrigger which in the parameters resumes the gsap-from animation just created
5. I call the "fromScale" function
(in my various attemps also with timeline...see the commented part in the CodePen)
 

In the example here, I have a 100vh high gray section with a simple paragraph in the centre, then follows a background image with a box positioned with a translate -40% at its top, then I have another 100vh high gray section with another paragraph.
 

Things I need to fix:

1. My main problem is that I am unable, neither with the timelines nor with other methods such as forEach to make the toggle Actions or the reverse or the onEnter, onLeave, onEnterBack, onLeaveBack methods work, with pin or without pin , it just doesn't work, the animations always start.😐

2. I also can't figure out how to set start and end values that can fit, dynamically, for each element regardless of its position. I just can't get it (that's why I created the data-gsap attributes). Another huge problem when you want to create animations to be called in an entire project.
 

I've been trying different approaches for days and this means that I probably haven't grasped well some basic concept about scrolltrigger,😔 or there's a problem in my logic (or syntax?) even if I watched the video lessons I have at my disposal and the docs and I don't understand (also because the more I search the more I realize that the same thing can be done in a thousand ways..so then I get lost...)

I hope someone can help me. Thank you all in advance.♥️

See the Pen RwJOxPz?editors=1011 by chiaralyn (@chiaralyn) on CodePen

[alig01]

 

Hey, 

 

There is a small error (scrub) that slipped in, which is why it didn't work properly. But don't worry everyone has been at the similar point and its part of the learning curve.

 

5 hours ago, Claire said:

I would like the animation to happen only once when scrolling down

ScrollTrigger has a property for this once:true

Quote

It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed.

 

5 hours ago, Claire said:

make the toggle Actions or the reverse [...] methods work,

Its because you are using scrub: 2. Scrub is directly linked to the scrollbar, so the progress of your desired animation depends on its position, which is why your toggleActions won't work. Just remove it and it should work as expected (

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

). 

 

Quote

// why marker is not placed at the top of element?

Scale your element to 0.5, for example, and you'll see that the markers are still on top and just adapt to the size of the element.

 

5 hours ago, Claire said:

I also can't figure out how to set start and end values that can fit, dynamically, for each element regardless of its position.

I am not sure how to answer it or if I even understood the question correctly, but I will try.

ScrollTrigger has already default values for start and end which are well set for the most cases.

However, if you want to start the animation earlier, you have to change the start point and just try from which point it looks better for you. The same goes for end, if you want the animation to go longer/slower, you have to increase the end point, for example like this end: "+=1500 bottom"

 

See the Pen NWzmEVG?editors=0010 by alig01 (@alig01) on CodePen

I created a codepen where I tried to simplify everything a bit, but the question was whether scrub: 2 was intentional or whether it got there by accident during trial and error and copying.

 

Hope this helps.

[Claire]

Thank you very much @alig01 ☺️!!

 

you have perfectly understood the point, as usual (and I was hoping you would answer me!!!😇).
Thank you so much for your invaluable help, as always!

I tried to implement your suggestions and I have something to ask you:
 

1. Using once: true doesn't make the scrub work, it cancels its effect. So, this might be the solution I will adopt.
But my question is simply: is there a way to keep the animation tied to the scrollbar but completing it on scroll up? (It would be perfect...)
This question is mere curiosity, the solution might already be just the once:true.
(The problem occurred because my client changed his mind about the animations and now he doesn't want them on scroll up).

2.

21 hours ago, alig01 said:

Scale your element to 0.5, for example, and you'll see that the markers are still on top and just adapt to the size of the element.

Ok, I think I understand that the scale determines the dimensions that the markers "feel". This is why I see them both in the center of the paragraph if scale is set to 0.
 

3. I'll do some tests to verify the default start and end values. Thanks so much for the suggestion!
I wanted to know if there is a way to dynamically calculate start and end values so the animation always starts correctly and is perfectly visible in all conditions. Anyway, I'll do some tests based on your suggestions.
 

4. Your implementation is great, I just can't use it as-is because I need "standalone" animations, which can be applied randomly to various HTML elements in the project (which is a CMS managed site, with pages that will be created by the user).
For this I'm creating functions whereby I can, with a data-gsap attribute, give animation to different elements, without having to rely on "custom" timelines built for each section.
Maybe I should try to use timelines in these functions, in the core of animation, but I can't quite understand the difference (and pros/cons) between a forEach and a timeline when working with arrays of elements to animate.

As always, thank you from the bottom of my heart, you helped me understand and this is priceless.

See you soon and hugs from Italy♥️!

 

[alig01]

No problem, I'm glad I could somehow help.

 

1. In order to work with scrub, you need space to scroll through. Your scrollTrigger starts and ends at the bottom, so there is no space, which is why it looks like that once: true is not working. And that makes me wonder if scrub was even necessary in the first place, when all you needed was a start trigger to set off the animation.

 

On 12/11/2022 at 5:31 PM, Claire said:

is there a way to keep the animation tied to the scrollbar but completing it on scroll up?

There is always a way, the question is rather whether it is worth the effort and expense to implement it this way when it can be done easier.

 

3. There is no shortcut, or at least none that I know of. You must choose the triggering elements wisely so that the animation always starts correctly and is visible under all conditions.

 

4. Unfortunately, I can't help you with this since I haven't dealt with this type of question/problem yet.

You use timelines for complex animations when something needs to happen sequentially and you want more control over the animation.

 

Last but not least I can recommend you the blogs or the learning center on this site or Carls YT channel. If you are unsure about a concept or a plugin, they have already published a video or a post about it. 

 

Good luck with your project.