Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

NLopesx

Members
  • Posts

    8
  • Joined

  • Last visited

Everything posted by NLopesx

  1. 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 }) } });
  2. 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.
  3. https://codepen.io/NLopesx/pen/PopZJwp This is my example. I need a function(I don't know if it works with a function) that plays the timeline2 at the X scroll position like the first code pen example.
  4. This is the timeline I created: let timeline2 = new TimelineMax (); timeline2 .from ('.grid', 1 , { opacity: 0, }) And this is what I need (https://codepen.io/GreenSock/pen/wvaxKEM), but it's not working don't know why. Maybe deprecated or I'm just being a noobie?
  5. How to play animation (timeline1 with many .from and .to animations) when appears on screen or in X scroll height?
  6. The animation takes 1 second and only after 1 second I can scroll again. The scroll gets "disabled" while the animation is going on, don't know how to call it. If can't help me, thank you a lot.
  7. Here's an example. I can only scroll when the animation is finished. Is this some GSAP tool or something like that? https://ironvelvet.studio/works
  8. I need to know what tool is this. Once I scroll the scroll kinda gets disabled till the animation finishes and then I can scroll again.
×