Jump to content
Search Community

gsap animation in animation scrolltrigger

polli24 test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello, 

im new to gsap and programming and im wondering how to make something like an animation in an animation during the same time. 

what i want to achieve is a bubble who gets bigger while scrolling and during each new panel it should fire the inner stagger animation. 

What would be the best approach for these kind of things. 

 

Thanks in advance for any advance. 

See the Pen dyKQagQ by polli24 (@polli24) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @polli24 welcome to the forum!

 

I'm not completely sure what you are trying to do. Personally I find the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

See the Pen dyKwMbZ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

You're talking about staggers, here is a video that has a real smart way of working with staggers, having things move out and in at the same time. Is something your could use in your animation?

 

If not, could you maybe explain your question as follows:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • Like 2
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...