Jump to content
Search Community

Need Help with an Image Sequence :)

lebensform test
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,

Finn

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

Mikel

 

  • 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.
×
×
  • Create New...