Jump to content

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

elegantseagulls last won the day on June 21

elegantseagulls had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


elegantseagulls last won the day on June 21

elegantseagulls had the most liked content!


About elegantseagulls

Contact Methods

Recent Profile Visitors

5,381 profile views

elegantseagulls's Achievements

  1. Your codepen has JS and CSS in the HTML section. When I pull that code out, it seems to work just fine for me.
  2. I think you are getting confused as to what React is doing and what GSAP is doing... This will be helpful:
  3. You don't have a gsap tween in this.
  4. I'd think that adding a value to your scrub (eg: scrub: .5) and having the entire animation in one ScrollTrigger scrub would be the way to go here.
  5. Yeah, that sounds like it could be taxing on even medium-powered devices. This might be something to look into canvas/webgl for.
  6. Not really... without having the actual device it's really hard to tell what it's actually going to do. The original SE is probably a good baseline for a lower-powered device these days. Just make sure you are following best practices (animating properties that can be hardware accelerated, etc).
  7. onComplete should be doing the same thing... To note you'll want to do onComplete: functionName, not onComplete: functionName() as this will run the function immediately. More info on the callbacks here:https://greensock.com/docs/v3/GSAP/Timeline/eventCallback()
  8. That site is animating the clip-path property. You could probably just do something like gsap.fromTo(img, { clipPath: 'inset(0, 0, 100%, 0') }, { clipPath: 'inset(0, 0, 0, 0') });
  9. So animating height isn't very performant. You may have better luck setting the progress bar to height: 100vh; with a transform-origin: top center; then animating the scaleY from 0 gsap.from(progressBar, { scaleY: 0, scrollTrigger: { ... }} This way you wont need to calculate the window's size on refresh.
  10. Where are those scripts defined (Wordpress can be funny about this sort of thing if you have scripts specific to being logged in, etc)? Are you sure that script is running, and those elements are available to be animated when the script runs?
  11. Do you have the private NPM module installed with the bonus files?
  12. It's not a baked in feature, but it's possible: You'll need to use draggable's callbacks to get current dragged position/coordinates and then re-map those coordinates with a little math to the preview box.
  13. If you use a chrome-based browser you can download the extension to see just how many sites are using GSAP (It's a lot) https://chrome.google.com/webstore/detail/official-gsap-sniffer/dbcjaehchnikgdjjcehagpcikmlpjefh
  14. Do you have a minimal demo showing that's happening here? Are you resetting the ScrollerProxy to body, or whatever is the new scroll-container?