Jump to content
GreenSock

PointC last won the day on October 30

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,964
  • Joined

  • Last visited

  • Days Won

    401

Everything posted by PointC

  1. Okay, now I follow. Yeah - SplitText won't be the answer here. I'd just set it up as one timeline, use the parent container as a trigger and set scrub to true. https://codepen.io/PointC/pen/MWQLOYy/d0c1bbfdfaf738f29d61540e2eef6e19 Happy tweening.
  2. Isn't that what your original demo is doing? Each <li> is triggering a color change. I don't follow your desired outcome. If you want the <li> elements to be on individual lines, you'll need to change your CSS and get rid of the display:inline. ul#hometext li { /* display:inline; */ font-size:80px; }
  3. Hi @Jessiu Welcome to the forum. Sounds like you're looking for the SplitTextPlugin. That would allow you to split the text into lines and set up a ScrollTrigger for each one. The plugin is a perk for Club GreenSock members, but you can try it on CodePen for free. https://codepen.io/PointC/pen/RwQvZzp/462fb94d7a45cc5239461a133c8c6211 Hopefully that helps. Happy tweening and welcome aboard.
  4. I think @Aizy is referring to the updated pen in which scale has been used rather than scaleX and/or scaleY. @Aizy see how @SteveS has used a combination of scaleY and then scaleX to achieve the desired outcome? You'll also want to remove that scale(0) in your CSS. Happy tweening.
  5. Ha. One second too slow @Cassie. 🤣
  6. Hi @Justin N Welcome to the forum and thanks for being a Club member. 🎉 For these types of animations I almost always create a clone and set the yPercent/xPercent to +/-100. Depends on what you're doing. Then tween both to an x/y percent of +=/-= 100 (again, depends on which way you want it to go). Add infinite repeat and you're good to go. Here's an old seamless cloud demo which shows the technique. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/QZMraX
  7. If I understand the question correctly, I think you'd want to loop though your targets and add each to the timeline. This avoids manually adding a bunch of tweens like you have now. That way you can add as many divs as you like and it'll all still work perfectly. https://codepen.io/PointC/pen/jOZXXPa/5f9381468bbc6444d1ea73ff780a291a Hopefully that helps. Happy tweening.
  8. It might not be exactly what you need but I just dropped a new demo using clip-paths to transition fixed position images on scroll. Happy tweening. https://codepen.io/PointC/pen/zYRyveM
  9. Okay, a few things. If you want to use ScrollTrigger on the whole timeline, you need to move it off the single tween and into the timeline vars. Your end value should be "+=800" rather then "end+800" When scrubbing, the durations don't really matter as they represent a percentage of the scrub distance rather than an actual duration Here's a fork of your pen with some changes. https://codepen.io/PointC/pen/oNEQEYp/3c7f4f4ac6013860491e013d5514ce16 I've moved ST to the timeline vars. The first tween has a duration of 1 second and it draws the path. The next two tweens start at the same time via the position parameter label. The first fades the text in over 2 seconds and the next animates the letters via the startOffset attribute with a duration of 8 seconds. The next is another opacity tween that fades out the letters and that starts 2 seconds before the end of the letter loop. Finally, we have a 1 second tween that draws off the path. So, we have a 10 second timeline and that breaks down to percentages of the scroll distance like this: 0% → 10% Path draws in. 10% → 30% letters fade in and that starts at the same time as the 10% → 90% letter loop. 70% → 90% the letters fade out. 90% → 100% the path erases itself. A couple final notes: I'm not sure what you're trying to do with the onEnter and reversing the same timeline being controlled by ScrollTrigger. Using letter and word spacing in the CSS will require some manual adjustments to the startOffset end value needed to make the letters fully exit. I used -200%. If you want to change the opacity of individual letters as they animate, that would require separating them. Probably best to use MotionPath and convert the text to paths if that's the desired result. Hopefully that helps. Happy tweening.
  10. Sorry, still missing it. What path in your demo should be drawn first?
  11. If you want the text to enter one side of the path and exit the opposite direction, you can tween fromTo 100%/-100% for the startOffset. Something like this: https://codepen.io/PointC/pen/GRQwMea/7df4af981abf20511d3a409acf0fe150 I'm not sure I understand this part. Do you mean the path that the text follows?
  12. I'm having a hard time following the question and the demo seems to have quite a bit of code to look through. The simpler a demo, the better. If you just want an "X" shaped clip to reveal an image and it should never be more than 700px wide, I'd wire it up like this. https://codepen.io/PointC/pen/vYdQJKy Happy tweening.
  13. It just occurred to me that you may have wanted the echoes to all come to a stop before it repeats. If that's the case, using amount for the stagger and an equal value for the repeatDelay would work well. Happy tweening. https://codepen.io/PointC/pen/BaYGZaN/d29854ac5aaca6dd46fcd8d50dbcdc73
  14. Yep - it's pretty cool. It kinda gets overlooked these days with all the hoopla over ScrollTrigger and ScrollSmoother. You're a Club member (thanks 🎉) so you have access to all the goodies. Have fun.
  15. That's because of your onComplete. You're adding tweens to the end of the timeline on each repeat so the timeline is getting longer and longer. I assume you just wanted something like this. https://codepen.io/PointC/pen/qBxQmMY/9ad77250a0432d7baf26d1e377b56d5d Hopefully that helps. Happy tweening.
  16. FWIW - I'd probably try a custom random wiggle. I used that on my TP pen. Pay no attention to the Pixi related code. The wiggle stuff is all in the wiggle() function. https://codepen.io/PointC/pen/BaNVpWN I also used something similar for all the little floaty shapes on the header of Motion Tricks. https://www.motiontricks.com/ Happy tweening.
  17. We all are. Nobody knows it all. FTR - I'd set this up in a single SVG and do something like this. https://codepen.io/PointC/pen/vYdVwVP You can use a little Math to figure up the necessary radius of the SVG circle to fill the window. The only downside to this approach is that group 3 is actually above group 1 in the stacking order because SVGs don't have z-index. I think it's acceptable though as group 3 is almost faded out before group 1 restarts. At any rate, it should give you some ideas how to loop through the targets and create timelines. Happy tweening.
  18. It's been a minute since Jack has "whipped up" a new helper function. Time to dust off this old meme.
  19. Hi @Rob Fleming Welcome to the forum and thanks for being a Club member. 🎉 What you'll need to do is listen for an onComplete event for the slide position. Here's a stripped down version of my slider with just a wheel listener. https://codepen.io/PointC/pen/XWZxGVy I've put the spans into a target array and when the slide animation finishes, it rotates the one that corresponds to the activeSlide variable. This is just a simplified example. You could have unique timelines and elements for each slide too. If that's what you need, I'd create the individual timelines and put them into an array. Then you can play the appropriate one when each slide comes into position. Hopefully that helps. Happy tweening and welcome aboard.
  20. That's actually how you'll solve your seamless loop problem. You'll create a separate timeline for each target and a repeatDelay that allows the first timeline to start repeating before the third one completes.
  21. @Cassie are you seeing the big SVG circles around each shield shape in Chrome on Mac? I can't get them to show up in Chrome or Edge on PC.
  22. Performance issues with graphics are almost never GSAP related. Those are some pretty big images to be scaling and rotating. Maybe use them as a background for the div rather than an image. Just FYI - I don't even see the big circle images with text in Chrome or Edge. I only see them in Firefox so I'm not sure what's happening there. I think you'd also benefit from looping through the targets rather than manually creating three identical timelines. You could also use autoAlpha instead of display:block and alpha. FWIW - the rotation in FF seems smooth to me.
  23. Hi @mangobanan Welcome to the forum. It sounds like you're looking for something like this? https://codepen.io/PointC/pen/WNMajJw/ea1b2a2e3c17fb66429ff548629f39d5 Adding a transform perspective on the containing element can add a lot. You'll also see I split the tween into two as I thought it worked better in this case. Other than that, it's just a little finessing with timing and eases. Happy tweening.
  24. I don't follow the question and there is no revised demo, but it sure seems like you're trying to invent ScrollTrigger snapping. That's already available to you. Here's a basic example. https://codepen.io/PointC/pen/gOvjOXv Seems to me that would be a better option than having the window take off while the user is scrolling.
×