Howdy, ex Flash action scripter trying to figure out scrollTrigger :)

[TK421]

Hellos, I was a hardcore Flash animator back in the Macromedia days and when linkdup was the main site showcasing fancy websites (!) Always loved creating intro animations for websites and even got into Flash remoting and coldfusion for a little while. Anyhows, after a lengthy departure, Im back doing front end development and have been playing around with scrollTrigger - which is fantastic! I love the examples in the showcase section, very inspirational.

The scrollTrigger bubble hasnt yet burst so I'm still a little confuzzled over how to achieve the pin and scrub animation shown in my attached codepen (please excuse the somewhat basic CSS and layout, its been thrown together ;) ).

What I am wanting to achieve is to create a number of 'scenes' that pin on top of each other at the top of the screen and scrolling up and down will control the animation (scrubbing), first, fading in the background image and then once the background image has faded in, the overlayed red text will fade in, and once the red text has faded in, a line will be drawn from the text to the image. After a litle pause, the next scene will fade in over the top and fading in that scenes red text, line drawing etc. Once all the scenes have been shown, the last scene will fade out and scroll up out of view (unpin) and normal, static web page content will appear.

The background images will be of a 3D vehicle at various angles so when each scene is it will give the impression the vehicle is spinning around.

Any help much appreciated!

See the Pen ExyJMBW by TK_four_two_one (@TK_four_two_one) on CodePen

[ZachSaucier]

Hey TK421 and welcome to the GreenSock forums! Welcome back to the front-end world.

 

When creating somewhat complex animations like this you should break it into pieces. I recommend forgetting about ScrollTrigger until you have the animations going the way that you need them to be. Then once you're done hooking them up to scrolling via ScrollTrigger should be relatively straightforward. In other words, start small and build upon what you have  

 

Let us know if you have specific questions and we'll be happy to help. 

[TK421]

Thanks for the welcome ZachSaucier!

 

OK, will do! Thanks again!

[TK421]

Hi, Ive made a little progress and slowly building up the animation to how I want it. Here is the latest codepen:

See the Pen RwRzOOq by TK_four_two_one (@TK_four_two_one) on CodePen

 

This version has scrubbing inside of each 'section', fading in the image, text and vertical and little circle at the end of the line, however, the entire scrollTrigger is based on each section scrolling up and sticking to the top of the browser window, whereas I would rather have them appear stacked on top of each other, much like this example (but without the infinite loop):

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

Any help much appreciated!

[ZachSaucier]

Take a look at how this demo does it (found in the ScrollTrigger demos list).

[TK421]

Thanks ZachSaucier, much appreciated. I checked out the demo page prior to starting out creating my own animation, but couldn't find an example that does exactly what Im after.

Here is the latest code pen:

https://codepen.io/TK_four_two_one/pen/ExgYKRQ

Its almost there now, a lot of head scratching just to get it this far (ha!). Just one niggle and thats to only play the animation once the pinning starts at the top of the browser window as it stands the 2nd 'scene' has started playing before the scrolling pins, so the first scene has been and gone by that time. And the reverse scrolling animation isn't as smooth as I would like. Anyhow, all a learning curve and so much fun Ive become a member :)

 Im sure my approach isn't  the most efficient way to achieve the desired result, Im sure a more seasoned gsap 'er would have more elegant solution ;)

[ZachSaucier]

Good progress. Thanks for supporting GreenSock with a Club membership! 

 

A few side notes:

• You're using the old syntax for eases and durations. We recommend the condensed string form like ease: "power4.in" and putting the duration inside of the vars parameter.
• I think you'd benefit from using GSAP's defaults.
• Use double colons for your pseudo-elements. For example ::after.
• Generally it's best to avoid combining CSS transitions and GSAP. I recommend not toggling a class but instead animating the actual properties that you need to animate. If you need to animate a pseudo-element then we recommend animating CSS variables that the pseudo-element uses or making it a "real" HTML element.
• I think using better code formatting might help you work faster and help others understand your code more easily 
• Why mix jQuery with GSAP for doing the same sorts of things? Such as $('#animation').height(800 + 'px'); instead of using gsap.set().

As for your question about the 2nd scene playing before the section pins, that's just because of your start position being hard coded based on the index of the section (start: () => (i - 0.5) * innerHeight). I'm not sure what you want the value to be instead but I'd guess that you want it to be positioned on where the trigger is positioned, not a numerical value like you have. You probably also want to do the same thing for the end position. 

 

You should avoid doing things dynamically as much as possible (such as changing heights, adding classes, etc.) especially when you're doing them yourself. It introduces more opportunity for bugs and edge cases you have to handle. You can usually do what you need to do with completely static timelines and ScrollTriggers.