Jump to content
GreenSock

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

ZachSaucier last won the day on March 16

ZachSaucier had the most liked content!

ZachSaucier

Moderators
  • Posts

    7,490
  • Joined

  • Last visited

  • Days Won

    201

Everything posted by ZachSaucier

  1. Hey DoPhuongAnh and welcome to the GreenSock forums. Here's how I'd break down this effect: Position all of the text, one after another, around a circle. You've already done most of this! The text will overlap at this point. Select all of the parts of the text for each segment (in the case of the site you linked that means each person's name). Store this for reference. Keep a reference of which part is currently active. Whenever the active segment changes, rotate the circle so that the active one is where you want it. Also animate the transparency of all of the segments that are off screen to 0. Animate the transparency of the segments next to the active one to a value like 0.7 or so. Animate the transparency of the active segment to 1. Hopefully that will help you get a bit further than where you are now
  2. Hey Marc. This is simply because of how your CSS is set up. Each line has the overflow hidden, but some characters go more than the current line height. You can see that it's the issue if you remove your CSS for the line height. There's not a simple fix for that sort of situation. One solution is to use the default line height and translate the lines minorly instead. Then when SplitText is done and you revert the HTML you could add back in your line height.
  3. It sounds like you're looking for GSAP's staggers. If you need more customization, use a functional value for the delay property.
  4. No, there's no client-side authentication for GSAP files. Currently your site is giving a 404 for the DrawSVG file (the current URL it's looking at is /ektest/content/gsap-simply-green/esm/DrawSVGPlugin.js which I found using the Network tab in the dev tools). I'm guessing the path is wrong. But you also want to be using the minified, non-modules version, not the ESM version as Jack said.
  5. Hey @Akunin and welcome to the GreenSock forums. Please create a minimal demo of the issue and create a new thread about your issue like this thread covers:
  6. This came up on StackOverflow. Here's another version of Blake's pen which might be helpful for future readers: https://codepen.io/ZachSaucier/pen/gOWGKQZ
  7. Hey joaooliva and welcome to the GreenSock forums. Have you gotten what you wanted working in a minimal form first? If so, then the issue is just converting it to Webflow. If not, please try to make a minimal demo first If you still have a question let us know.
  8. Hey informanimated and welcome to the GreenSock forums. You'd need to position it so that one copy is to the left of the viewport instead of to the right, making sure that the wrapping is happening for the updated positioning. You'd also need to change the sign of the x value in the animation.
  9. Hey Eli. It sounds like you're wanting something like this: Perhaps there's a more recent thread about the same subject - I haven't been following these forums very closely the last few months @Cassie or @GreenSock has there been any public update related to this subject?
  10. Hey Figar. Those effects are created using custom WebGL GLSL shaders. It's not the most simple thing to write one yourself but you can find a lot of existing effects on sites like Codrops. This article about mixing WebGL with regular webpage content might help as well.
  11. Creating that effect should be pretty straightforward with the Text plugin
  12. Hey @vsiege. Please send member inquiries to info@greensock.com or reach out via our contact page
  13. Hey Stepheno and welcome to the GreenSock forums. The exact transition from up above isn't the most trivial with the Flip plugin because 3D transforms aren't directly supported by the Flip plugin (as stated in the docs for it). With that being said, Flip can handle the sizing and positioning changes for you and you could hook into the onStart callback to fire off a rotation animation as well.
  14. Someone else may be able to better explain why setting the duration of the timeline doesn't work well, but usually for things like this I add a dummy tween: https://codesandbox.io/s/gsap-scrolll-forked-37lbi?file=/src/App.js Side note: you don't needs quotes around the scale value.
  15. @PointC I completely forgot about the CSS wrapper, haha.
  16. @Cassie has started a how NOT to use GSAP "competition". We'd love to see more participants! Here's mine:
  17. Yes, makes sense. I was going to do it that way if there were not something secret already built in that supports this Thanks for the info!
  18. Hey friends, With an object based stagger, you can do an onStart like so: stagger: { each: 1, onStart: myFunc } However if you use the distributeByPosition stagger helper function (like this demo) it doesn't work that way. Any ideas how to get a stagger onStart to work with a setup like the linked demo?
  19. ZachSaucier

    Text rotator

    You could change the duration of the tween inside of the loop. Or use .timeScale() on the timeline. Also I noticed you used the old formatting for duration of the tween that you added. We recommend including the duration inside of the vars parameter so that you can make use of GSAP's defaults functionality.
  20. I made something sort of similar that I linked to in this post that may be of some use (though it's definitely not production-ready):
  21. You've got 120 lines of HTML, 310 lines of CSS, and 201 lines of JS. That's really as minimal as you can get? I bet you could strip out 500+ lines of code and still get the same core logical issue that you're having. Perhaps it's best to recreate the issue from the ground up. You're much more likely to get a speedy and helpful reply if you make a bare-bones demo
  22. Sorry, what do you mean by this? I haven't looked closely, but I'm guessing this is a z-index/layering issue. Side note: you should probably create your function(s) outside of the matchMedia listener so they don't get recreated multiple times. You can call it inside the matchMedia as needed.
  23. Hey kryptonite and welcome to the GreenSock forums. GreenSock tweeted about how to make this sort of thing and some similar ideas:
  24. Hey J4N1P and welcome to the GreenSock forums. Sure, you just need to make the image sequencing a part of a greater timeline and attach a ScrollTrigger to that timeline.
×