Jump to content


Need Help with an Image Sequence :)

Moderator Tag

Recommended Posts

Hi Guys,


Im a Developer from Germany so please excuse my English.. 

I need to create an Image Sequence and it should behave like this:


You would scroll down until you have the Sequence in the Center of the Viewport, then the Viewport would be pinned (for example) and the Sequence starts. As soon as the Sequence is complete you could scroll further on the page. Is that possible with GSAP? I tried Scroll Magic and failed but i don´t have any experience with Green Sock.. 


I attached a Picture of the concept.. the Picture you see in there is actually a GIF implemented as an image Sequence. So as soon as the whole brown Module is in view, Scrolling of the ViewPort would be disabled until the Image Sequence is finished.


The Live URL (not finished) is here. Maybe you guys have an Idea.. I would be really thankful!


Greetings from Germany,


Image Sequence-min.png

Link to comment
Share on other sites

Hey @lebensform,


Welcome to the GreenSock Forum.

Here is a small example of how you can use GSAP scrollTrigger


See the Pen wvMpazV by mikeK (@mikeK) on CodePen


var action = gsap.timeline({
    scrollTrigger: {
      trigger: ".sec02",
      scrub: 1, 
      pin: true, 
      start: "top top",
      end:"+=2000", // scrolling distance = 'scrub duration' of timeline
.to('#wrap', {y:-wrapImgHeight*4, duration:2, ease:'none'},0.5 ) // position 0.5 - anaimation should not start directly after pinning
.to({},{duration:0.5}) // just a little pause before going any further


Happy scrolling ... und Grüße aus Hamburg



  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.