Jump to content
Search Community

translateY effect

Joe165 test
Moderator Tag

Recommended Posts

Hey guys, I discovered GSAP only yesterday, and I love what I see. I have it installed and it works. However... I want to replicate the scroll effect you can see at used with the portfolio items at https://tonik.pl when viewed in desktop. I understand and have scrollTrigger (basic idea anyway) working. I just can't get it to animate on my example to have the left (text) and right (portfolio item) both horizontally centered when I'm at the vertical middle of a section.

Are there any libraries or websites with snippets I can get a general idea from? I've been trying for hours now, but I'm afraid my JS skills are next to none. I usually can "read" and adjust code when I get the general setup though. Tried to create a codepen, but apparently that's too hard for me.

Hope someone can help.  Cheers!

Link to comment
Share on other sites

Welcome to the wonderful world of GSAP, @Joe165

 

I read your post a few times and I'm not entirely sure what exactly you're struggling with. Can you please provide a minimal demo, like in CodePen? I know you said you tried...was there a particular hangup? Did you watch our video about how to do it? 

 

It's just very tough to offer help without seeing the issue in context. 

 

There are a lot of ScrollTrigger demos at https://greensock.com/st-demos - maybe something there can help? 

Link to comment
Share on other sites

22 minutes ago, GreenSock said:

Welcome to the wonderful world of GSAP, @Joe165

 

I read your post a few times and I'm not entirely sure what exactly you're struggling with. Can you please provide a minimal demo, like in CodePen? I know you said you tried...was there a particular hangup? Did you watch our video about how to do it? 

 

It's just very tough to offer help without seeing the issue in context. 

 

There are a lot of ScrollTrigger demos at https://greensock.com/st-demos - maybe something there can help? 

Hi, tnx for your response.

So, I have this effect applied directly underneath the hero section: https://wordpress-390681-2062166.cloudwaysapps.com/

The problem is, when I'm in the vertical center of the section, the targeted div is not centered (due to the yPercent variable). The example I gave: https://tonik.pl has an identical effect, yet all is centered when the targeted section is vertically centered.

My code:
 

gsap.to("#div_block-24-10", {
  yPercent: 50,
  ease: "none",
  scrollTrigger: {
    trigger: "section-21-10",
    // start: "top bottom", // the default values
    // end: "bottom top",
    scrub: true
  }, 
});

gsap.to("#div_block-24-10", {
  yPercent: 50,
  ease: "none",
  scrollTrigger: {
    trigger: "section-21-10",
    // start: "top bottom", // the default values
    // end: "bottom top",
    scrub: true
  }, 
});

So the example (centered): https://prnt.sc/1gqzjkm
Mine (50px too low): https://prnt.sc/1gqzyqc

I'm not sure how to solve this. When I set yPercent to 0 it's solved, but I'm left without an animation.

Hope I've been more clear this time. Tnx again.

Link to comment
Share on other sites

Troubleshooting a live site isn't practical - there are way too many other things that can interfere and we're not able to make live edits to experiment. That's why it's so important to provide a CodePen. 

 

It sounds to me like just a logic issue in your code - you've got it animating from yPercent 0 to yPercent 50 over the course of the entire height of the viewport, so of course when you're in the middle that element is going to be at around yPercent 25 (assuming a linear ease). You could just do a .fromTo() that starts at yPercent -50 and goes to yPercent 50 so that when you're right in the middle, it's at yPercent 0. 

 

gsap.fromTo("#div_block-24-10", {
  yPercent: -50
}, {
  yPercent: 50,
  ease: "none",
  scrollTrigger: {
    trigger: "section-21-10",
    scrub: true
  }, 
});

Is that what you're looking for? 

 

If you still need help, I'd encourage you to recreate just the most basic possible thing in CodePen to illustrate the issue. Simplifying it like that is a really really good practice for your own troubleshooting because it clears away all the clutter and lets you see much more clearly. You can build it up slowly until it breaks and then BOOM, you see what's causing the problem. 

Link to comment
Share on other sites

That worked like a charm sir!

I have one last question, if I copy and apply the code to another (identical layout) section underneath my first, and simple change the sections and divs it points to, the effect gets really messy on the second section underneath it. Do I have to take the yPercentage into account if I want to repeat this code snippet?

Thanks for you patience. You probably have to deal a lot with noobs like me. I'll try to get that codepen going next time.

Link to comment
Share on other sites

6 hours ago, Joe165 said:

I have one last question, if I copy and apply the code to another (identical layout) section underneath my first, and simple change the sections and divs it points to, the effect gets really messy on the second section underneath it. Do I have to take the yPercentage into account if I want to repeat this code snippet?

It's super duper difficult to troubleshoot blind. Please always provide a minimal demo if you'd like help. 

 

My guess is that you accidentally forgot to change the trigger and/or the target of the other animation. Again, very tough to say without seeing it in context. 

 

6 hours ago, Joe165 said:

Thanks for you patience. You probably have to deal a lot with noobs like me. 

No problem, that's what we're here for. 

 

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