ScrollTrigger Animation/Sequence

[AdventurousDeveloper]

Hi everyone,

 

Hoping someone here wouldn't mind helping me troubleshoot a scrollTrigger animation/sequence.

 

Put simply, what i'm trying to achieve.... is to display a pinned series of images and text content that overlay one another on scroll.

 

For each image I have a colour positioned at x: 100% that is masked using css mask-image. On enter of each panel the colour would position to x: 50% and then x: 0% on exit of the panel. At the point when the colour is at 0%, I need to hide the text and image from the current panel (leaving the colour in place) and replace with text and image in the next panel.

 

I think my first issue is getting the correct scrollTrigger structure. I've put together where I am at on CodePen, though my timeline end doesn't seem work properly in CodePen as it does locally...

 

end: "+=" + panelHeight * panels.length + "+=100%"

 

Any pointers or direction would be very much appreceiated!

 

Cheers

 

 

 

See the Pen GRQOKLV by tracta_nz (@tracta_nz) on CodePen

[GreenSock]

I don't have time to dig into this fully right now, but let me offer a few things I noticed right away: 

1. Your start value is invalid ("+=0% +=25%"). The "+=" prefix is a relative value...but you've got nothing that it's relative to. So in a start value, you could have something like "0% 25%+=100px" which would mean when the top of the trigger hits 100px below 25% from the top of the viewport. Notice the "+=" is connected to an actual value preceding it (25%)? 
2. Your end value is invalid ("+=" + panelHeight * panels.length + "+=100%"). You can use a relative value like "+=500" and it'll use the start as the reference point, meaning the end will be 500px beyond the start. But you're using a value that would resolve to something like "+=620+=100%" which doesn't make sense (a relative percentage value of a relative pixel value?) I'm really not sure what you're trying to do there
3. You're animating ALL of the ".color-inner" elements for EACH of the panels. I'm pretty sure you only wanted to animate the one ".color-inner" element that corresponds with each panel. There are many ways you could do this, but I assume it'd be easiest for you to just use a .querySelector(".color-inner") on the panel inside the .forEach() loop. 
4. I'm not sure why you're sequencing an animation to xPercent: 50 and then xPercent: 0 with the same duration - why not just animate to 0 and double the duration? Are you trying to get an ease to 50% and then another ease to 0%? Seems to me like that might look weird. 

I think you may be getting confused because you're trying to do so much at one time. I'd strongly advise you to ONLY focus on getting the color masked animation working well independently. Don't involve ScrollTrigger at all. Just have a standalone animation that runs immediately and once you're happy with how that looks, THEN try to hook it up to the scroll position. One step at a time. 

 

If you get stuck, feel free to post back here with your updated CodePen and we'd be happy to take a peek. 

[AdventurousDeveloper]

Hey @GreenSock,

 

Thanks for taking the time to have a look at this and your comments/advice. I'll absorb what you have commented on and have another crack at it.

 

Thanks again!

[AdventurousDeveloper]

Hey @GreenSock,

 

Thanks again for your comments, really helped me identify where I was going wrong with a lot of things...

1. This was bit of a brain fart moment, sorry 🤦‍♂️
2. What I was trying to achieve was have the end point be the total combined height of all the panels. I thought this would be necessary to make sure I scrolled the entirety of all my panels.
3. This was also bit of a brain fart moment, sorry again 😭
4. The reason for animating to 50% on enter of panel is purely due to client brand collateral.  

Taking your advice, I started with the animation first without scrollTrigger. This definitely made it easier to plan everything out.

 

On enter of the panel, the colour is animated from x: 100 --> x: 50. The idea is on exit of the panel, the colour would then animate to x: 0 covering the image while it is replaced with the image in the next panel.

 

 

 

 

I've got my mask animation working with scrollTrigger, if you wouldn't mind taking a look at my new CodePen please?  

 

See the Pen QWQOrxJ by tracta_nz (@tracta_nz) on CodePen

 

I think what I need to do next is have a scrollTrigger to handle the container scroll, which has an end point of the total height of all panels. Then add another scrollTrigger for each of the panels to animate both the text content fade out and also the colour mask animation?

 

Similar set up to this pen posted in the forum 

 

 

Any tips or further advice would be really appreciated  

 

Cheers!

[GreenSock]

4 hours ago, tractaNZ said:

have a scrollTrigger to handle the container scroll

Sorry, I'm not quite sure what that means. You mean fake-scrolling the text blurbs?

 

Glad to see you're making progress. 👍

 

I'm having a tough time advising you because I don't really understand exactly what you want. I assume that maybe you want to pin the panel while the text animates? If so, you'd probably need to set up a ScrollTrigger for that and obviously use the "pin" feature. Maybe it'd be a timeline that animates the various chunks of text in/out with a delay inbetween, and scrub: true on the ScrollTrigger. Again, I'd recommend just focusing on getting the animation right first and then hook it up to the scrollbar. 

 

If you get stuck, just try to isolate the one thing you're trying to solve in a minimal demo and post back here with your GSAP-specific question and we'd be happy to help. Just to set expectations properly, though, these forums aren't intended to be a "give us your list of requirements and we show you how to build it" kinda thing, but we definitely want to answer any GSAP-specific questions like about the API. 

 

Good luck!

[AdventurousDeveloper]

 

23 hours ago, GreenSock said:

Just to set expectations properly, though, these forums aren't intended to be a "give us your list of requirements and we show you how to build it" kinda thing, but we definitely want to answer any GSAP-specific questions like about the API. 

 

Apologies, I definitely didn't want to come across as I was wanted someone to show me how to build it , I really appreciate the time you have spent helping me so far! I hope my next issue is considered an GSAP-specific question 🤞🤞. 

 

I have setup a new Codepen, this time with my content panels are animating correctly with the images and text hiding and showing as required.

 

See the Pen XWZVRQR by tracta_nz (@tracta_nz) on CodePen

 

What I'm struggling with is chaining of my animations per panel, more specifically the '.color-inner' elements seen in my pen.

 

I have an animation set to trigger when an element in a panel hits the top. 

 

// transition color on enter
gsap.to(document.querySelector('.image .color-inner'), {
  xPercent: 50,
  scrollTrigger: {
    trigger: document.querySelector('.scene-inner'),
    start: "top center",
    toggleActions:"restart none none reverse",
    invalidateOnRefresh: true,
    markers: true
  }
})

 

This works great for the first item, but doesn't work for the other elements. If I add to the forEach loop, all the animations are triggered at the same time, even if I add the "elem" as the trigger.

 

scenes.forEach(function(elem, i) {
	//.. adding animation here triggers all elem
})

  

Is it best practise to use a master timeline and then add timelines for both the colour mask animation and the content/image fade in/out to it?

 

Cheers,

[Cassie]

Heya, If I were you, I'd just add everything to the same timeline and then use the position parameter to space them out. That's usually the solution for trying to chain animations nicely.

See the Pen MWQrVxQ?editors=1010 by GreenSock (@GreenSock) on CodePen

This article is really helpful if you need to know what possibilities there are
 

Hope this helps!