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 ;)

Hi, Ive made a little progress and slowly building up the animation to how I want it. Here is the latest codepen: https://codepen.io/TK_four_two_one/pen/RwRzOOq 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): https://codepen.io/GreenSock/pen/rNOebyo Any help much appreciated!

Thanks for the welcome ZachSaucier! OK, will do! Thanks again!

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!