Jump to content
GreenSock

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

PointC last won the day on May 15

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,822
  • Joined

  • Last visited

  • Days Won

    390

Everything posted by PointC

  1. Hi @digitalfrci If I understand your goal correctly, I think you can switch your listener to this and it should work for you. $(".header__nav--mobile, .mobile--close").click(function () { navigation.progress() > 0 ? navigation.pause(0) : navigation.play(); }); Hopefully that helps. Happy tweening.
  2. autoRotate: 180, Happy tweening.
  3. hmmm... still not sure I follow the need for a pause check since the user pauses it and plays it, but to answer your question: You need to put the pause and isActive checks into a function and call that function with each of your clicks. Something like this. https://codepen.io/PointC/pen/BaJgjOP/24913940da15e9541043e0e68a26d99a Does that help? Happy tweening.
  4. You're checking for the paused state in your onUpdate callback. Once you pause the timeline, that onUpdate is paused as well so you wouldn't get the paused:true console log. Make sense? Happy tweening.
  5. Hi @Juan Ignacio Welcome to the forum. I see your pause/resume buttons are working correctly so I'm not sure I follow the question. What are you trying to do with the animation that it's not doing now? Yeah, I'd recommend a timeline for this that you create ahead of time and it just keeps playing until the user presses the pause button. No need to keep running all those checks in the onUpdate callback. Maybe some more info will help us get you a better answer. Happy tweening and welcome aboard.
  6. Hi @panamera You currently have toggleActions and scrub on this, but you can't have both. I assume you want scrub so that's what I did in my fork. Your trigger was set to start at top top and end at bottom bottom but the trigger was/is 100vh in height so those happen at the same time. I set them to center for clarity. See how the scrub works properly now? https://codepen.io/PointC/pen/BaJgNgy/a3ba3dccfc969f6e3d1b2e5248c19e3d You'll be able to shorten that timeline a whole bunch by using a stagger. https://greensock.com/docs/v3/Staggers GreenSock also has SplitText as part of Club GreenSock so you may want to take a look at that as well. Hopefully that helps. Happy tweening.
  7. Happy to help and absolutely no need to feel stupid. We've all been there. Thank you for your Club membership. We really appreciate your support.
  8. Hi @MagicMaciej This will come down to artwork prep most of the time. I did a quick fork of your pen and used the start shape to pull a few points into your final shape. MorphSVG is excellent at morphing even with a difference in point counts. That being said, if you can create the elements with the same number of points, you'll almost always get buttery smooth and predictable results. https://codepen.io/PointC/pen/bGaPdoX You may find some additional tips and info in my organic morphing article. https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/ Happy tweening.
  9. Please give this a whirl: ScrollTrigger.refresh(); Happy tweening.
  10. Looks like you're loading Montserrat. Seems like maybe this is a 'wait for custom font' and/or kerning issue. Check out this thread for some ideas. Happy tweening.
  11. You're just missing the vars object. Please give this a try. document.addEventListener("DOMContentLoaded", () => { gsap.to(".text", { scrollTrigger: { trigger: "wrapper", markers: true }, x: 200 }); }); Happy tweenig.
  12. PointC

    Nested Accordion

    You'd create a timeline instead of a single tween. Something like this should work. https://codepen.io/PointC/pen/zYpQVxj Happy tweening.
  13. Yep - that works. I misunderstood that part. Perhaps a note about that on the ScrollSmoother effects doc page would be beneficial. Thanks.
  14. hmmm... something seems amiss here to me. I may need to call @OSUblake or @GreenSock into the thread. Here's a fork of your demo. I set the images to change opacity in the listener just to make sure I hit the right targets. It seems to work at first but sizing up and then down again doesn't seem to set the data-speed on the 2nd target. https://codepen.io/PointC/pen/ExoJzQE So I did my own test with some simple paragraphs. Sizing this up sets the data speed correctly, but sizing down seems to set the data-speed on the 1st and 3rd targets only. The second target remains at 1.5 and gets really jumpy. It stays jumpy at large screen sizes too. https://codepen.io/PointC/pen/xxpeepR This is my first time setting the data-speed for different screen sizes in a query so maybe I'm not understanding something. Hopefully Blake or Jack can provide some insight.
  15. Okay... I see now. You just want certain elements to have their data speed changed. I thought all of the elements were going back to 1 on small screens. Got it. You can switch the targets const targets = gsap.utils.toArray(".smootherReset768");
  16. You can grab all the data-speed attributes like this: const originalSpeeds = []; const targets = gsap.utils.toArray("[data-speed]"); targets.forEach((t) => { originalSpeeds.push(t.getAttribute("data-speed")); }); Then you have a set of targets and an array of original speeds.
  17. But to do it the way you currently have it setup (no sprite sheet), you'd just make one small change. gsap.set(Div,{attr:{class:`icon${(i%2) + 1}`},x:R(0,w),y:R(-100,-150),z:R(-200,200)}); https://codepen.io/PointC/pen/popBLja/146de3244e0f33f09731512c7b81c796 Happy tweening.
  18. I think you could probably loop through all the elements with a data-speed attribute and record them. Then loop back though that array on resize to put them back to original values. Happy tweening.
  19. Hi @kodralex Looks like that's an old one from our own Diaco. I made an updated version of his idea a few months ago that takes advantage of GSAP 3 syntax and the new random utility method. I used a sprite sheet for mine which should work well for you too. Hopefully it helps. Happy tweening. https://codepen.io/PointC/pen/BadPdXx
  20. Ha. Understandable. That's actually the one I was looking for but couldn't find it. I can't find anything on CodePen. 🤷‍♂️
  21. This thread may help. Here's a cool pen from resident guru @OSUblake. It's a few years old, but he may have an updated version - I'm not sure. https://codepen.io/osublake/pen/OxWjgq/4c3752574267b3a986cb8eee7ccb8c81 Happy tweening.
  22. Like this: https://codepen.io/PointC/pen/JjMVJxY/e68373e8ab31f5a91f56abc3a9ea524f Happy tweening.
  23. You'd want to loop through the elements and create a separate timeline and trigger for each group.
  24. I think this thread can help.
  25. Yep - I think you could follow Blake's pen here as a guide. https://codepen.io/GreenSock/pen/RwgLGYq Happy tweening.
×