Jump to content
Search Community

Pictures are not where they should be

trazetJet test
Moderator Tag

Recommended Posts

41 minutes ago, Rodrigo said:



Maybe this example can help you:




If not, please be as specific as you can regarding the effect you're trying to achieve and the issue you're having.


Happy Tweening!

Thank you. Yes, it is. But my effect begins from the very bottom and reaching the desired block, goes upstairs. The screenshot shows the scenario of what is happening. Do I need to change styles?
using animated elements in your example in my project?

Link to comment
Share on other sites

53 minutes ago, GreenSock said:

I'm not sure if this will help, but here's a video from @Carl that covers some of the concepts: 


Thank you, it was this video that I used to implement the desired effect, but something does not work for me and I do not understand what exactly

Link to comment
Share on other sites

I noticed several problems: 

  1. You created only ONE timeline and then you're attaching that same timeline to a bunch of ScrollTriggers (one for each section). That's definitely a mistake - each ScrollTrigger would be trying to fight for control of the same timeline and make it go to different places. I assume you wanted to create a different timeline for each section (in your loop)
  2. Your start/end values look very odd to me. You're using a pretty short element, a <span> with only a small amount of text like "step I" and telling the ScrollTrigger to start when the top of that hits 40% down from the top of the viewport which is fine, but you're telling it to end when the bottom of that element hits the bottom of the viewport which would actually happen BEFORE the start! I'm not sure what you were trying to accomplish there, but maybe you meant to set end: "bottom top"? 
  3. Are you trying to make the element animate to yPercent: 0 with an ease, and then immediately go to yPercent: -100 with another ease? 
    tl.to(purchaseImages[idx], {
        yPercent: 0,
        duration: 3.7,
        .to(purchaseImages[idx], {
        yPercent: -100,
        duration: 3.7,

    I wonder if you actually meant to animate that linearly to -100 in which case you could do that with a single tween and ease: "none"

If you still need help, please be very specific about what you want and what is broken, and try to keep it as isolated and simple at a time (don't list 5 requirements and try to accomplish them all at the same time - just do baby steps and solve one issue at a time). 


Good luck!

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