NLopesx Posted June 16, 2021 Share Posted June 16, 2021 My code is is the same like before it bugs. Even if I comment the first block of code, the first (the second before) animation still bugs. Is any bad practice I've been doing? Help me please. Link to comment Share on other sites More sharing options...
Makssshow Posted June 16, 2021 Share Posted June 16, 2021 Hello! It is hard to help you without your code. Can you add a codeopen link or just paste the code into your message? 3 Link to comment Share on other sites More sharing options...
NLopesx Posted June 17, 2021 Author Share Posted June 17, 2021 16 hours ago, Makssshow said: Hello! It is hard to help you without your code. Can you add a codeopen link or just paste the code into your message? The JS is basically this. I think the HTML and CSS doesn't matter maybe. gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ "all": function () { // OPACITY 1 THE OBJECT .opacity ON SCROLL const opacity = gsap.utils.toArray('.opacity'); opacity.forEach(opacity => { gsap.to(opacity, { scrollTrigger: { start: "0% 90%", end: "0% 60%", trigger: opacity, scrub: true, // markers: true, }, opacity: 1 }) }); // HOME TEXT SLIDING LEFT gsap.to(".scrollLeft", { scrollTrigger: { trigger: ".scrollLeft", scrub: 1, start: "50% 90%", end: "0% 10%", pin: true, // markers: true, }, xPercent: -43 }) // GLOBAL TITLE SLIDING LEFT const titleLeft = gsap.utils.toArray('.titleLeft'); titleLeft.forEach(titleLeft => { gsap.to(titleLeft, { scrollTrigger: { start: "0% 90%", end: "0% 10%", trigger: titleLeft, scrub: 2, }, xPercent: -6 }) }); const titleLeft2 = gsap.utils.toArray('.titleLeft2'); titleLeft2.forEach(titleLeft2 => { gsap.to(titleLeft2, { scrollTrigger: { start: "0% 90%", end: "0% 10%", trigger: titleLeft2, scrub: 2, // markers: true, }, xPercent: -15 }) }); }, "(min-width: 799px)": function () { // PHOTOS SLIDING gsap.to(".Dev", { scrollTrigger: { trigger: ".Dev", scrub: 1, start: "50% 70%", end: "50% 20%", // markers: true, }, xPercent: -30 }) gsap.from(".Mkt", { scrollTrigger: { trigger: '.Mkt', scrub: 1, start: "50% 70%", end: "50% 20%", // markers: true, }, xPercent: -30 }) }, "(max-width: 799px)": function () { // HOME TEXT SLIDING LEFT gsap.to(".scrollLeft", { scrollTrigger: { trigger: ".scrollLeft", scrub: 1, start: "50% 90%", end: "100% 0", pin: true, markers: true, }, x: -1300 }) // PHOTOS SLIDING gsap.to(".Dev", { scrollTrigger: { trigger: ".Dev", scrub: 1, start: "50% 70%", end: "50% 20%", // markers: true, }, xPercent: -76 }) gsap.from(".Mkt", { scrollTrigger: { trigger: '.Mkt', scrub: 1, start: "50% 70%", end: "50% 20%", // markers: true, }, xPercent: -76 }) } }); Link to comment Share on other sites More sharing options...
Cassie Posted June 17, 2021 Share Posted June 17, 2021 Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this. It's very hard to understand what the issue is from code snippets alone. When you post a demo - could you also explain what you mean by 'the animation still bugs' You are animating elements and using the same element as the trigger which can cause buggy behaviour, it's best not to animate the trigger element! I often use containing elements as triggers instead. Also - maybe this post will help you with best practises. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now