Jump to content

PointC last won the day on October 30

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Your second forEach loop is also adding a mouseenter, but I think you meant to use mouseleave. Just making that change won't work though because you're creating a new timeline on each enter/leave event. You'd probably want to create the timelines and listeners in one loop and then play/reverse on enter/leave. Something like this. https://codepen.io/PointC/pen/abqqmEr/1a5ddca48c06989a4f5bb5b33f1f8ddf Happy tweening. PS I also switched your variable declaration to use the GSAP utils.toArray method rather than the spread operator and a nodelist. Not that what you did was wrong. I just didn't know if you knew about the utility method.
  2. Here's a demo showing how to animate pseudo elements with CSS variables. https://codepen.io/PointC/pen/rNpXXWq
  3. x/y are better than top/left. You can use the GSAP shorthand like y:-500. I'm not sure I follow your reset question. The element animates into view on page load. (no problem) A button sends the element back out of view. (no problem) After it animates out of view it resets. How does it start again? Another button click? The same button that made it exit? If you have a revised demo, that would be great. Happy tweening.
  4. In addition to the excellent info from @elegantseagulls, your onComplete for tl2 doesn't fire on subsequent clicks (if that's your goal) because that timeline has already played. You'd need to use: send.addEventListener("click", (e) => { tl2.play(0); }); Happy tweening.
  5. @GreenSock you can't just wander into a thread late and drop a one line solution with a cool plugin. I'm pretty sure that's cheating. 🤣
  6. Hi @Consequence Thanks for being a Club member. We really appreciate it. 🎉 I think I'd wire up a polygon to some Draggables and do something like this. The width and height are dynamic so all you need to do is adjust the w/h variables to your liking. https://codepen.io/PointC/pen/zYRpBbm Hopefully that helps. Happy tweening.
  7. If you don't want to use two elements, it sounds like a good use case for CSS variables. https://codepen.io/PointC/pen/ZErvbPR Happy tweening.
  8. This was just discussed and built in this thread. Happy tweening.
  9. So you want the blue target to just follow the sections up and down. Like this maybe? https://codepen.io/PointC/pen/OJQOjMj/5fc0b34c5556a20c14682af588926e38 Does that help?
  10. Hi @Pageking Welcome to the forum and thanks for being a Club member. 🎉 All those triggers set up their initial values from the top of the page, so in this case, I think setting immediateRender:false should give you the desired results. https://codepen.io/PointC/pen/MWQOoxB/2d44efb53ab184a0692ccc1f4c19ff29 Happy tweening and welcome aboard.
  11. Ha! I'm too slow with my PS. @akapowl wins.
  12. PS Looks like immediateRender false on the .to tween is also a solution.
  13. Hi @Tedev Welcome to the forum. I'm pretty sure that's caused by the ScrollTrigger tween setting its starting value to zero on that first element in the from 0 opacity tween. So, you reverse the ScrollTrigger tween and it goes back to zero. The other three elements in that group of four have their starting opacity set to 0. If you flip one of the blue panels with the red one, you'll see the same thing happen to the first blue panel. Fixes: Remove the opacity tween in your ScrollTrigger because it's not doing anything anyway. Switch the order of the tweens Call a function containing the ScrollTrigger tween when the first opacity tween completes so the starting values are correct. Here's a fork with #2. https://codepen.io/PointC/pen/mdXqmwz/40f3539166669a535bddf0860dc34ace Happy tweening and welcome aboard.
  14. Jack beat me to it, but yeah - those sets are firing at the same time. They may not seem like it since you have that 0.3 delay on the timeline and some other position parameters on the timeline with all the sets. As far as flicker goes, I didn't see any. 🤷‍♂️ Good luck.
  15. hmmm... I'm not familiar with Drupal at all. If you can reproduce it in a CodePen, I'm sure we can help. You're using the latest versions of GSAP and ScrollTrigger, correct? I'd try removing one of the media queries from the three you're using just to see if one is the culprit. (typo or otherwise).
  16. Hi @nicoleanowa Welcome to the forum. My recommendation would be to place each steam heart on its own timeline. That way you can repeat one before the other two have finished. I separated the autoAlpha and y tweens since I wanted the autoAlpha to yoyo and fade back out as it hits the end of its movement. You'll see all the durations and repeatDelays are based on the dur variable. That way you can simply adjust one value to your liking. https://codepen.io/PointC/pen/ExQwrpo/473a8aa94e4274966c383d83bbd3646f Hopefully that helps. Happy tweening and welcome aboard.
  17. Hi @Willy Christian Welcome to the forum. Looks like you have some overlapping media queries. I think you'd want to set a min and max for each one like this: https://codepen.io/PointC/pen/QWQqyqo/f86870c78eec4ef7e0c13e8c3775311d Happy tweening.
  18. I also see some CSS transitions in there, but I can't really tell if that is an additional problem since the demo has quite a bit to look through.
  19. I think you need to make this change on line 38 // switch this var tl = gsap.timeline({paused: true, duration: 1}); //to this var tl = gsap.timeline({ paused: true, defaults: { duration: 1 } }); Hopefully that helps.
  20. Please try this. $("#changeSize").click(function () { $("#changeBox").addClass("section--change"); ScrollTrigger.refresh(); }); Happy tweening.
  21. I don't know a whole lot about jQuery, but removing the function wrapping everything seems to fix the problem. I'm not sure what that's doing since you already have DOMContentLoaded and load event listeners. Your pen also wasn't loading GSAP or any of the necessary plugins. https://codepen.io/PointC/pen/BaYdwNB/c433123cfd2b3fc5db165402a6100992
  22. I'd echo Jack and Cassie's thoughts from above. Definitely a nice idea @Eunomiac, but I wouldn't want to see a bunch of unanswered logic questions. There are active community members answering questions around here, but by and large, most are answered by Admins/Mods so I'm not sure many people would jump on the 3rd party, logic type questions. Most of us on the GSAP team wouldn't really have time either. That's pretty much the main problem. We're all trying to get all the GSAP related questions answered so diving deep into other code is a bit of a stretch. Most of the Mods are volunteers and have full-time jobs too so it's a balancing act. That's some of the best advice you can get. Helping others is how I learned GSAP and probably 50%+ of what I know about vanilla JS. You'd be amazed how much you'll learn just by answering some questions. You might make a few mistakes (I made many), but that's how we learn. All the best and happy tweening to everyone.
  23. Sure, you can start from a central point. For that you'd want to animate the cx/cy attributes of each circle. I just hard coded the values in my fork, but there are other ways to get the correct position too. Here's a fork with that update. https://codepen.io/PointC/pen/MWQvmmo/524ac72daf0762b035d3f47cccc5d427 A couple other notes. I added all the tweens to a timeline. That way you don't need the delay on any of them and the bowl fade-in will happen after the marbles finish their animation. The opacity tween isn't doing anything here. When you use a from tween, that is saying "hey, animate from this position/opacity to my current position/ opacity". Since the opacity is already 1, from 1 → 1 won't actually show anything. I changed it to from 0 in my fork so you could see the difference. Hopefully that helps. Happy tweening.
  24. I don't know anything about React, but it seems there has been an issue (especially with from tweens) with React 18 and strict mode. Maybe this thread can help.
  25. Great - glad to hear it was something simple. Happy tweening and thanks for being a Club member.