Jump to content

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!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Looks like a good job for the Modifiers Plugin. https://codepen.io/PointC/pen/rNJNMGK Hopefully that helps. Happy tweening.
  2. Here's a basic wire-up with ScrollTrigger. https://codepen.io/PointC/pen/dydbEOp/154c29357e40925ee9e84028ade0e10c A few other notes. I combined your three stand-alone gradient tweens into one as they were all the same. I put everything on a timeline with one ScrollTrigger, but you can certainly keep them separate. (You can have as many ScrollTriggers as you like.) No need to set yoyo to false. Also no need to set repeat:0 or repeatDelay with no repeats. Hopefully that helps. Happy tweening. PS Definitely go through ScrollTriggers demos as there are lots of good ideas in there. Have fun.
  3. Could you put that into a minimal demo for us?
  4. ScrollTrigger will drive the animation if you set scrub:true. Otherwise, it will just start the animation when you hit the trigger. So you create your tweens and timelines just like a normal animation. Get it looking just right and then decide how it will be triggered and if you'll use scrub or not. If you are going to use scrub:true, I'd recommend a "linear" or "none" ease. Does that make sense?
  5. You can set the end to anything you want. If I'm understanding your desired result correctly, you'd use something like: end: "bottom bottom" If that isn't what you meant, could you please provide a minimal demo? Thanks.
  6. Sounds like you're looking for ScrollTrigger pinning. There are a whole bunch of demos to get you started. https://greensock.com/st-demos/ When building ScrollTrigger animations it's best to create the animations first (no ScrollTrigger). Once you're happy with those, it's fairly easy to wire them up to ScrollTriggers. Doing both at the same time can be a bit overwhelming when you're new to GSAP. Happy tweening.
  7. Happy to help. That was a fun one. Just FYI - I converted the .png files to .webp which resulted in a lot smaller file size. You don't have to do that, but this is an excellent place for quick conversions. https://cloudconvert.com/ Happy tweening.
  8. Perfect. Thanks. Gotta give @OSUblake most of the credit on this one. He helped me understand the effects a lot better. The next time I post this answer, I'll take all of the credit.
  9. You could drop it into an SVG and use a clip-path. (Pointer events will only register on the revealed area.) Then add a separate glow image. I'd do something like this: https://codepen.io/PointC/pen/QWQLGqY Happy tweening.
  10. Hey @celli I had the same confusion, but had a conversation with Blake about it. Here's the demo I was using to learn what was happening and his revisions. The important bit is: smoother.effects().forEach(effect => { let trigger = effect.trigger; targets.forEach(t => { if (t === effect.trigger) { effect.kill(); } }); }); So we're looping through all of the effects and checking if the trigger matches one of our targets (the ones we want to switch). If it matches, we kill() it and make another one. If not, we leave it alone. This should be a guide to get you rolling and scrolling. https://codepen.io/PointC/pen/JjMqEdw/1e609824990d2eaa0e8bf02c5422dfb8 Happy tweening.
  11. Looks like you're making one big timeline, but you're hard coding the text spans at 0.55. You probably want something more like this. tl.to(slide.querySelector(".slider__header"), { "--scaleX": 1 }); tl.from(slide.querySelector(".slider__header span"), { x: -50, autoAlpha: 0}, "<+=0.55"); My demo created individual timelines. Not that you can't make one big timeline, but my personal preference would be to create child timelines in the loop and add them to a parent. Makes it really easy to control and adjust the timeScale() of the parent. I'm not seeing that being used in your demo, but you're not allowing vertical scrolling here so you'd want to take a look at some of the ScrollTrigger pinning demos. One other minor note: There are missing targets and you're loading two versions of GSAP. Hopefully that helps. Happy tweening.
  12. Hi @Chybosky It'll be best to use CSS variables to animate pseudo elements. It gives you much more control. Here's a demo with the basics of how to do it. https://codepen.io/PointC/pen/rNpXXWq Hopefully that helps. Happy tweening.
  13. You'll need to register the plugin. gsap.registerPlugin(TextPlugin); https://codepen.io/PointC/pen/JjMgLop/02869f0e1ee6cd13d869699556700b2c Happy tweening and welcome to the forum.
  14. Hi @neontrenton First, let's get rid of all the CSS transitions. This is a GSAP forum. Just giving you a hard time, but using both can cause fights for control. Here's a quick fork of your demo. I looped through the container elements and created a trigger and timeline for each. You'll also see that I used a CSS variable for the headline pseudo element so the underline would animate for each. This still needs some tweaking but should point you in the right direction. https://codepen.io/PointC/pen/QWaeQgP/3d32a7dc10ce7ec78f062ebdc2967d73 Happy tweening.
  15. I'm too slow. 🤣
  16. I'd use x/y instead of left/top. Also upgrade to the latest GSAP. https://codepen.io/PointC/pen/eYyqeBR/e0446716471d4a9d65ba1bae8f506a0f
  17. Hi and welcome to the forum. Sure you can do that with GSAP. Check out ScrollTrigger. Lots of demos here: https://greensock.com/st-demos/ This one in particular will get you close to that example page. https://codepen.io/GreenSock/pen/YzyqVNe Happy tweening and welcome aboard.
  18. I'm not seeing the ScrollSmoother plugin being loaded. Maybe that's it?
  19. You can set visibility:hidden in your CSS and then set the autoAlpha when everything is ready.
  20. Probably a good idea to check the console on this one. Looks like you're loading an older beta version of GSAP (current one is 3.10.4) and I see a whole bunch of errors of missing targets, variables that are undefined and some that are declared twice. Here's a small part of them. As Blake mentioned, a minimal demo is the only way we can help. Just show us what you want to do by using a few divs and we can probably point you in the right direction. Quite often you'll be able to spot your own error just by simplifying everything. Thanks and good luck.
  21. Our very own @Carl has his Creative Coding Club. Tons of training for a reasonable cost. https://www.creativecodingclub.com/courses/scrolltrigger-express?ref=462949 Happy tweening.
  22. I'd recommend using a "linear" or "none" ease with scrub. If you don't want it tied to the scrub, you can remove that and go back to toggleActions and a specific duration. Yes - you can have as many ScrollTriggers and timelines as you like. Give it a try and we can help if you get stuck. Happy tweening.
  23. Hi @WebDeveloper096 Welcome to the forum. The appearingCircles part of the timeline was just running on its own as it wasn't part of the ScrollTrigger. Moving the ScrollTrigger to the timeline vars takes care of the problem. https://codepen.io/PointC/pen/XWVLqaL/5fd2a6919e62d43675cabcb07f2589bf Happy tweening and welcome aboard.
  24. Okay... I see - you'll have other controls that will pause/resume. That makes more sense now. Often times I'll just set up a global toggle variable that I can flip from true/false, 0/1 or whatever that I use to keep track of the timeline state. You may want to take a look at the position parameter. I think it would greatly enhance your project. Happy tweening.