Joe165

Hi. I've used the search function, but can't find it. Very basic question: How do I make code work for certain viewport sizes? I have the very simple code blocks underneath and I want to either change the yPercentage per viewport size - or maybe disable the code altogether for some other viewports. I've tried to find out how to do it, but each time I seem to be doing something wrong. Regards gsap.fromTo("#div_block-24-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-21-10", scrub: true }, }); gsap.fromTo("#div_block-74-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-61-10", scrub: true }, }); gsap.fromTo("#div_block-125-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-95-10", scrub: true }, }); gsap.fromTo("#div_block-162-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-160-10", scrub: true }, }); gsap.fromTo("#div_block-142-10", { yPercent: 33 }, { yPercent: -33, ease: "none", scrollTrigger: { trigger: "#section-134-10", scrub: true }, });

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.

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.

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!