Jump to content
Search Community

no animation, effect seen only when 'ended'

aetryu test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I've got problem with launch GSAP with Scroll Magic.

I have two sections, and I want to trigger opacity of second section's elements from 0 to 1 when user scroll to second section. Unfortunally, I dont see animation, theres only effect when animation is complete. For this codepen example I set animation duration 2s (please, scroll down throu 'red section' to check elements in '#section__2'). I dont know why, but I dont see animation in progress. Elements shows after 2 seconds instantly, without any 'alpha coverage'.

 

What am I missing? Any advice would be appreciated.

See the Pen QjLMXK by chev (@chev) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Unfortunately we can't support 3rd party plugnis that work on top of GSAP.

 

For better support I recommend you to head over to ScrollMagic's git repository and create an issue:

 

https://github.com/janpaepke/ScrollMagic/issues

 

What I can see is that you're using a staggerFrom() method but you're not passing any stagger value, which creates the separation between each animation instance, like this:

var tlShowUp = new TimelineLite();

tlShowUp.staggerFrom('.gallery', 2, {
  opacity:0, ease:Power1.easeOut
}, 0.5);// this final value is the stagger time

That seems to work better. Also you could try shorter times, like 0.75 for the duration and 0.1 for the stagger time.

 

Finally take a look at this blog post and the video made by Carl:

 

http://greensock.com/stagger

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