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 @aszuster ScrollMagic is not a GreenSock product so we can't offer any support for it. GS does have its own plugin - ScrollTrigger, which does everything SM can do and much more. Check it out. Just a note - your pen is loading GSAP 3.10.3 and an old TweenMax (1.20.2). You'll want to remove that old one. Please try converting your project over to ScrollTrigger and we'll be happy to assist with any GSAP related questions. There's also an expansive demo section available to help get you started. https://greensock.com/st-demos/ Happy tweening.
  2. Please give this a try. ease: condition ? "power4" : "none" https://codepen.io/PointC/pen/ExQVjbO/ea42ab4e6e542401ef5a8bab653c5b32 If you need it for your project, there's also a parseEase() method. https://greensock.com/docs/v3/GSAP/gsap.parseEase() Hopefully that helps. Happy tweening.
  3. There's a workaround for lines and nested elements here: Happy tweening.
  4. Okay, it's May The 4th so I couldn't resist. I present Fly Wars. https://codepen.io/PointC/pen/jOZPYQV
  5. Stay with original infinite timeline and tween the timeScale() approach. https://codepen.io/PointC/pen/VwQLrKP/f5adcb0f2061e000f83c798e0f782819
  6. uh-oh. @Carl is getting all fancy. Looks like we've got an old fashioned tween answer battle.
  7. I think I'd limit the number of repeats on the tweens so you can use your timeline repeat and repeatDelay. Maybe something like this: https://codepen.io/PointC/pen/GRQJMZp/8525298a3d05e41cdde6eafed8768319 Hopefully that helps. Happy tweening.
  8. Yep - definitely upgrade to the GSAP3 syntax. Much easier. You can use separate tweens for that animation and add the position parameter so they start at the same time. If you absolutely need them in the same tween, you can use wrap() for that. Something like this should work. https://codepen.io/PointC/pen/yLvNXzd/def96988245998df9fe481f47f7d2335 Hopefully that helps. If you need more info, as @mvaneijgen mentioned, a minimal demo would be most helpful. Happy tweening.
  9. Happy to help. Thanks for being a Club member. We appreciate the support.
  10. I think you meant to put the scrub property inside the ScrollTrigger object like this. https://codepen.io/PointC/pen/ExQjaVv/9f10efebafd9134692e98aa46524db88 Happy tweening.
  11. That's a pretty tricky animation to get right. You've probably seen the cool Lemonade line drawing page. https://www.lemonade.com/giveback-2019 @Trapti recently did a super job at recreating that animation. It's worth taking at a look at what she did here: https://b2mg4r.csb.app/ Happy tweening.
  12. If I understand the desired result correctly, I think I'd just use a regular tween instead of a timeline. Then you can call ScrollTrigger.refresh() onComplete of the tween in your click handler. Maybe something like this. https://codepen.io/PointC/pen/YzePoQr/8740a24e12a98756ecba99961ab9abee Happy tweening.
  13. tween.pause().scrollTrigger.disable(); seems to work fine for me. Happy tweening.
  14. You can use your grid background image on the giant content div rather than the body background so the background stops scrolling when you pin the big wrapper. Just my two cents.
  15. Understood. I just meant that we can't dive into all the code of a complete website. That's why we ask for a minimal demo. If you can show any problems with a just few divs and it's GSAP related, I'm confident we can help you. Happy tweening.
  16. We can't troubleshoot a live site, but your second demo with ScrollSmoother isn't working because it's not using the latest versions of ScrollSmoother and ScrollTrigger. If you update those to 3.10.4, it looks like it's working to me. https://codepen.io/PointC/pen/abqzvBB/bf111dcaf8eb712ac38c6d203e8b7925 Happy tweening.
  17. Sounds like you're looking for CustomWiggle. https://codepen.io/PointC/pen/yLvyNXR It's a perk for Club GreenSock members. Happy tweening.
  18. Sounds like you're looking for clearProps. https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-clearprops Happy tweening.
  19. I don't think I'm following the question as I don't see why you'd need to explicitly set the height like that. If you want a smooth animation, you can do this: https://codepen.io/PointC/pen/zYRYaGX/4e44586a88c4ce2cb0d0051dde687e97
  20. I don't know much about Vue, but I think you'd want: this.draggable[0].disable(); Does that help? Happy tweening.
  21. Thanks for the reduced demo. I can see what's happening now. As I mentioned in my first reply, this may be an immediateRender situation and that is indeed the case. You're using a whole bunch of zero duration tweens so you can eliminate the delay on the first tween in each timeline by adding this to your defaults. function taDa() { const tl = gsap.timeline({ defaults: { duration: 0, immediateRender:false } }) I forked your pen and made a couple modifications to the taDa() function to give you another option for this animation. In that function, stickman and shadow 2-8 are identical so those tweens are created in a loop and everything comes from the defaults so we don't even need anything in the vars for those. I used a tiny duration and took advantage of yoyo since you're flipping opacity to 1 and then right back to 0. The cool thing about doing it this way is the repeatDelay in the defaults. I set it to 0.1, but you can increase or decrease that for a different feel to the animation. Changing it to 0.2 creates an old school flip-book style look. Changing it to something around 0.05 will create a much more fluid animation. I commented out the additional child timelines on the master and had the animation restart on hover. https://codepen.io/PointC/pen/dydydQv/c6c0a9a5bd2b38e22541fca997d7ab26 I think you can take advantage of some loops in the other functions too. You can also use a yoyo tween for the bag wiggle. Hopefully that helps. Happy tweening.
  22. From the docs: ScrollTrigger.addEventListener("refreshInit", function() { // this code will run BEFORE the refresh }); ScrollTrigger.addEventListener("refresh", function() { // this code will run AFTER all ScrollTriggers refreshed. }); https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Happy tweening.
  23. Hi @brianrivet It's too complicated to troubleshoot a live site. If you can put something into a minimal demo, we'd be happy to take a look. You mentioned things work after a resize event so perhaps everything isn't loaded when you set up your initial ScrollTriggers? Resizing will fire ScrollTrigger.refresh(), but you could also manually fire it as a test. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() That's where I'd start looking, but we're happy to help if you can demonstrate the problem in a minimal demo. Happy tweening and thanks for being a Club member.
  24. Hi @Vivodionisio Welcome to the forum. There is just far too much to look at there. If you're having trouble with just the shadow morph timeline, trim everything down to just that piece. Eliminating the extra pieces in the SVG would be very helpful too. We just need a minimal demo to see the issure. That being said, I'd recommend .set() over the zero duration tweens. https://greensock.com/docs/v3/GSAP/gsap.set() Instead of a delay on some of the tweens in the timelines, you'd benefit by looking at the position parameter. I'm not sure as I can't dive too deeply into all that code, but you may also want to look at immediateRender. If you can trim it down to just the necessary bits, I'm confident we can point you in the right direction. Happy tweening and welcome aboard.
×