Jump to content
Search Community

Elements render in final position before animation starts

danielapicciotto test
Moderator Tag

Recommended Posts

Hi!

 

I was wondering if someone could help me, as I am about to lauch this site in which I have an animation for which I'm using ScrollTrigger with from() to a position absolute + scroll magic.  

The problem is that in some cases in desktop and always in mobile, the elements (images and divs) render before de animation starts. I mean, there are elements that should start with Opacity 0 but they first appear (so you already see thins of the animation before starting) and then, after some seconds they turn to be in the way they should for begining the animation.

 

I know that it's very helpfull for you to help me if i put everything on a code pen, but i can't upload the images. So I left all the code, and here I share the link of the web so you can see it. http://losderechosnoseaislan.com/home1.html

 

If someone could help me, i would be pleased cause i'm in a hurry.

 

Thanks in advance!!!!

See the Pen WNxVzwE by danupicciotto (@danupicciotto) on CodePen

Link to comment
Share on other sites

Hey danielapicciotto and welcome to the GreenSock forums.

 

There are quite a few errors in your code:

  • ScrollMagic isn't a GreenSock product and we don't support it here. Instead we highly recommend using the official scroll plugin: ScrollTrigger. It looks as like you're attempting to use both. Don't do that, just use ScrollTrigger. 
  • You have a lot of tweens that each have their own ScrollTrigger but each of the ScrollTriggers have the exact same vars which means they're effectively the same. Instead of doing that I recommend creating a single timeline, placing all of the tweens using the position parameter, and using a single ScrollTrigger on the timeline. This also would allow you to use GSAP's defaults functionality which is one of the keys to animating efficiently
  • You're using the outdated syntax for your eases which is one of the most common GSAP mistakes.
  • You're animating the top and right properties but you should try to stick to just animating the x and y properties.
  • You have a lot of very similar code. Instead of that you should probably be using a loop to create your tweens - again a key to animating efficiently.
  • You have ScrollTrigger.matchMedias nested inside of ScrollTrigger.matchMedias. That doesn't make any sense.
  • To prevent the flash of content at the beginning use the approach covered in this post.

I also think it'd be helpful if you slowed down and watched the ScrollTrigger video.

 

Taking the time to understand what's going on first will save you time in the end. I highly encourage you to read through all of the links I included in my post.

 

Happy tweening!

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