Two elements with different scrolltriggers

[ffinger]

Hey,

 

I try to animate different elements with different triggers (simply fade in and fade out). I read the document and most common mistakes and tried to use the array approach (two different arrays for each kind of element). In general it works like expected but when I scroll fast, the fade out animation would be stuck. I'm not sure what else to try and where my logic mistake is. Maybe someone can help out, would be very grateful!

 

I built a codepen and here's a video showing what I mean with the stuck fade out animation:

https://www.dropbox.com/scl/fi/a7c4say4esivt6c5zurdp/sc2.mp4?rlkey=ggrdgyflgbue58enpd6732skr&dl=0

 

Best,

Felix

See the Pen XWOpydV by ffinger (@ffinger) on CodePen

[mvaneijgen]

Hi @ffinger

 

What will be the effect you're going for? The issue right now is that you have multiple ScrollTriggers that animatie the same element, this will be really hard to manage, better is to create a timeline and add your in and out animation to that and let ScrollTrigger control that timeline. That way you have just one ScrollTrigger per element.

 

See the Pen qBgRQze?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

Personally If each item has a box and an image I would create even less ScrollTriggers I would wrap the red and yellow boxes in a container, lets call it .trigger and use that as the ScrollTrigger trigger and then create a timeline where both elements animate in and out. 

 

You could even abstracte it further by using the ScrollTrigger .batch() function https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()#advanced-example this is fully optimised for animating multiple elements with ScrollTrigger 

 

Hope it helps and happy tweening! 

[ffinger]

Hey @mvaneijgen

Thank you for the quick answer!! Your idea works but a bit different than I'd like to have it. I thought about doing it in a timeline as well. But the effect I'm aiming for is: The two elements (image and box) shall fade in at different times. First the box and at a specific position the image afterwards. They are supposed to fade out at the same time then. With a timeline now I can not really control the exact position, when the image fades in. Also with a timeline it gets a bit difficult to control for how long the two elements stay visible? Now they appear one after another and then instantly dissappear again instead of fading out later with a scrolltrigger.

 

Do you have an idea how this could work? The .batch() looks also like this is gonna be hard to controll the position the seperate fade-in and -outs.

 

Cheers and thank you already:)

Felix

[mvaneijgen]

I find you get more control this way, you just have to rethink what control is in this case and you don't have to worry about multiple ScrollTriggers tweening the same element, which is the issue you're facing now.

 

Personally I would first focus on the animation you're going for and only if that is done start thinking about ScrollTrigger 

 

See the Pen bGzgOZx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set.

 

Right now in the example below the total duration of the timeline is 8 seconds and the total scroll distance is 400px, this will result in each second taking up 50px of the scrolled space. With some math you can calculate exactly how much each tween takes to animate over which distance and thus you can set it up exactly how you like, with the bonus of not having to fight all the ScrollTriggers you'd created before. Extra bonus you've optimised your code from having 8 * 4 =  32 ScrollTriggers, to just 8 ScrollTrigger 🫠

 

Hope it helps and happy tweening! 

 

See the Pen gOqgqbK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[ffinger]

@mvaneijgen ok wow this is exactly what I was aiming for!! Pretty cool, thank you a ton. 

 

I only do not completely understand what you did there. In the timeline your saying tl.from(q(".class"). So this is like a nested selector? I've not seen this before.

And how is the "-=50%" overlapping by 0.25 seconds? I would assume 50% by 4 seconds would overlap by 2 seconds?

 

Again thank you for the time, this helps a lot!! This forum is so awesome  

Best,

Felix

[mvaneijgen]

3 minutes ago, ffinger said:

In the timeline your saying tl.from(q(".class"). So this is like a nested selector? I've not seen this before.

That is one of the many very useful Utility Methods GSAP provides. Check out for the others  https://gsap.com/docs/v3/GSAP/UtilityMethods

 

4 minutes ago, ffinger said:

And how is the "-=50%" overlapping by 0.25 seconds? I would assume 50% by 4 seconds would overlap by 2 seconds?

You're right! I'd not updated my comments after I'd changed my code. 

 

Glad it helped and happy tweening!

 

[ffinger]

On 11/7/2023 at 2:39 PM, mvaneijgen said:

That is one of the many very useful Utility Methods GSAP provides. Check out for the others  https://gsap.com/docs/v3/GSAP/UtilityMethods

 

You're right! I'd not updated my comments after I'd changed my code. 

 

Glad it helped and happy tweening!

 

@mvaneijgen thanks so much for the additional infos

 

What other issue I stumbled across now is that I would like to implement this into a page that is loading content dynamically via ajax. When I load the page at first everything works fine, but when I come back to the page from another one it seems like the triggers don't work and everything is visible from the beginning and the animations start flickering at the beginning. I tried to have the timeline killed with tl.kill() or tl.scrollTrigger.refresh(0), but then somehow images start to disappear. Apparently I'm doing something wrong and having trouble killing/refreshing the trigger/timeline correctly before the page loads. Do you have a tip how to do this properly? Maybe this is very obvious but I haven't done this before and don't get this cracking

 

Many thanks in advance!

Cheers Felix

[mvaneijgen]

Sounds like a framework issue, hat are you working in? The same as your pen, could you share a minimal demo with the setup you're using and include some  instruction on how to recreate the issue. Check out our Stackblitz templates below. 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

[Rodrigo]

Hi,

 

GSAP Context could be of some help here, since it helps you revert everything you create inside it's scope in a super simple and easy way:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!

[ffinger]

1 hour ago, mvaneijgen said:

Sounds like a framework issue, hat are you working in? The same as your pen, could you share a minimal demo with the setup you're using and include some  instruction on how to recreate the issue. Check out our Stackblitz templates below. 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

Oh okay I see. I'm working in a Wordpress theme which is apparently running with backbone.js framework, not sure how to re-create this on stackblitz though. Not sure if this helps but this is the current live version: Test environment

 

I understand if you can't help on this since it's very specific...I didn't think of this becoming such a rabbit holeI really love the animations you helped me with so far, but otherwise I'm trying to find an entire different approach to this. 

 

Have a great evening
Felix

Edited November 27, 2023 by ffinger

[ffinger]

6 minutes ago, Rodrigo said:

Hi,

 

GSAP Context could be of some help here, since it helps you revert everything you create inside it's scope in a super simple and easy way:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!

lovely thank you @Rodrigo, I'll look into this!

[ffinger]

Hey,

 

I found a solution (or at least it worked so far) calling a function whenever loading a new page to kill all scrolltriggers:

function killTriggers() {
  window.laytheme.on("newpageshown", function () {
    ScrollTrigger.kill();
  });
}

 

Also this topic helped me to understand better (just for anyone else ending up here with a similiar issue and being new to the topic :))

 

@Rodrigo @mvaneijgen do you think this is good practice? Thanks again for the tips, glad you're here to help!!

 

Cheers

Felix

[Rodrigo]

Hi,

 

Couldn't really tell you. I'm far from being experienced in WordPress, but as @mvaneijgen says: "If it works, it works", so as long as the code does what's supposed to do, is great to hear that you were able to solve it.

 

Finally thanks for sharing the solution with the community! 🥳

 

Happy Tweening!