Jump to content
Search Community

Problem with ScrollTrigger

camiloignaval test
Moderator Tag

Recommended Posts

Hello! sorry I'm just starting with gsap, and I can't find the solution to these problems:

The first is that when you want to mount the component again by clicking on 'quote' it appears with low opacity.

And the second problem, is trying to use scrollTrigger, I can't make the animation display when I reach the icon, I have to go even lower from the screen so that the animation is just done

Both problems can be seen in the screenshot and  attached video, thank you very much in advance!

 

code.thumb.png.631f9ac92a062df4fb370b3879a032de.png

 

I do not understand why the animation is not performed when reaching the object

See the Pen jOGgGxM by Camiloignaval (@Camiloignaval) on CodePen

Link to comment
Share on other sites

I noticed a few problems:

  1. You're pinning the very same thing you're trying to animate. You shouldn't do that - pinning requires special handling of various properties including transforms - you can simply pin a container element instead.
  2. You were loading multiple GSAP files - one in a <script> tag and another in an import statement from skypack. 
  3. You had some odd start/end values that would keep it offscreen during at least part of the animation. 

Is this more like what you're looking for? 

See the Pen JjrgLXz?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Thanks 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...