Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
muuvmuuv

Animated sections that freeze until the story has ended

Recommended Posts

Hey,


 


I'm currently working on a project with GSAP and scrollmagic. I want to create sections that has scroll animations inside with scrollmagic. So a section freeze for the time other animations came into. Is this section over it should smooth scroll to the next section. I call that somehting like scrollytelling.


 


1. each section has a story like on scroll there are elements that coming in part a part.


2. if a section has ended the story it should scroll to the next section without effects, like a normal onpager


3. it should be navigatable via next/prev buttons and dots for each section


4. all sections sould be responsive, so I can create querys for tablet/desktop/XL-desktop screens


 


Here the stack where I have a screenshot and detailed information: Stackoverflow


I attached a codepen with sections and the beginning of my scrollmagic.


 


Maybe someone has done a similar project or could help me a bit. I want to show first results until the end of next week.


 


Here is a image how it should look:


post-49104-0-10471900-1482079059_thumb.jpg


 


See the Pen PbXXXr by muuvmuuv (@muuvmuuv) on CodePen


See the Pen by PbXXXr (@PbXXXr) on CodePen

Link to comment
Share on other sites

Sorry, I'm not very familiar with ScrollMagic.

We really have to focus our efforts on questions that relate directly to the GSAP API.

This seems more like you need help setting up your project and managing multiple ScrollMagic scenes which is a bit beyond the type of support we can offer.

  • Like 1
Link to comment
Share on other sites

Sorry, I'm not very familiar with ScrollMagic.

We really have to focus our efforts on questions that relate directly to the GSAP API.

This seems more like you need help setting up your project and managing multiple ScrollMagic scenes which is a bit beyond the type of support we can offer.

 

I think it is both. The tweening is done by gsap with timelinemax. I figured out that I can set a Pin and so the section is waiting for the other animations until they are done.

 

Hopefully it was just a try to get some pro mention about my idea and a hint to the right direction :)

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.
×