Jump to content
Search Community

PointC last won the day on January 18

PointC had the most liked content!

PointC

Moderators
  • Posts

    5,126
  • Joined

  • Last visited

  • Days Won

    413

Everything posted by PointC

  1. Sweet work @Visual-Q ? Looks like this thread is getting pretty clever. I think we have one of these happening.
  2. Hey @creativeocean If you drop a transform attribute on the mask element you can get FF to play nicely with a rotation. https://codepen.io/PointC/pen/byEJpP Hopefully that helps. Happy tweening.
  3. My two cent approach: https://codepen.io/PointC/pen/ardXWP Happy tweening.
  4. We can try, but sometimes the community just grabs the wheel at the last second and we're now careening off the topic of GSAP.
  5. Yep, the SplitText plugin would make that super easy. https://codepen.io/PointC/pen/ZNbmZO All of the Club GreenSock plugins are huge time savers and a ton of fun. I highly recommend a membership. More info about joining the club: https://greensock.com/club
  6. I think we can all agree — the docs are a last resort of true coders. ?
  7. As I said, I wouldn't animate 'top'. I'd use 'y' and then all the info you need is in the transform object. https://codepen.io/PointC/pen/mYepGd As for your original code, you'll want this instead: this.target[0].style.top If you have other ideas, feel free to implement them. If you have GSAP related questions, we're happy to help.
  8. I'd recommend using y and then get the data from the gsTransform object, but if you want to use top, getBoundingClientRect() would be my choice. https://codepen.io/PointC/pen/oRjwoG
  9. My two cents — I'd say spawn what you need. GSAP is highly optimized so it should perform perfectly with lots of timelines and cleans up after itself beautifully. Have fun and happy tweening.
  10. PointC

    replay timeline

    Here's a demo from a different thread, but shows how the rough ease can be used for flicker. Maybe it'll give you some ideas. Happy tweening. https://codepen.io/PointC/pen/LdZZBp
  11. Here's a little demo of what I meant in case it wasn't clear. https://codepen.io/PointC/pen/Jqdmbj Hopefully that helps. Happy tweening.
  12. You could always jump the progress() of the tween to 1, get the end values and then jump it back to 0 before playing it.
  13. Oh, I wasn't doubting the accuracy of jQuery.position. I just don't use jQuery much and getBoundingClientRect() spits back eight properties so I find it more useful. But if your code above is working as you'd like, go for it. No need rocking the boat. Happy tweening.
  14. When I want to measure containers and landing spots, I always go with .getBoundingClientRect(). https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
  15. I guess I'm not fully understanding this whole project. Why do you need to clearProps between tweens? It seems like you want the next tween to start where the last one ended. Wouldn't a sequenced timeline of .to() tweens work well for this? Or am I missing something obvious?
  16. The master can have onComplete and each nested timeline can have its own onComplete callback.
  17. I see. That sounds more like a sprite-sheet animation. For that I'd probably go with a backgroundPosition and stepped ease. There are a bunch of threads about that. Here's a good one: I don't see anything in your code that would cause the second timeline on the master to start immediately. (Just FYI — the immediateRender:false is not necessary for the .to tweens). That's why I'd like to see demo. It doesn't have to be all your actual assets. Just some plain divs is fine. Here's a starter with your code pasted into the JS panel. You can fork this and drop in some divs as placeholders for the actual elements. https://codepen.io/PointC/pen/QRbxLQ
  18. I'm not quite sure I follow what's happening here with the zero duration tweens and toggling visibility. Can you put that into a demo? Thanks.
  19. Welcome to the forum. You have to wait for the tween to complete. https://codepen.io/PointC/pen/NVqyPX Happy tweening.
  20. Welcome to the forum. Here's a loop to clone the SVG and uses .insertAdjacentElement() to drop a copy after each h1. Then an each() loop to create your ScrollMagic scenes. https://codepen.io/PointC/pen/oRXoGE Hopefully that helps. Happy tweening.
  21. I've never actually used the jquery.gsap plugin and I rarely touch jQuery so I'm not an authority on either. Generally speaking though, if I wanted to get rid of a DOM element with a running tween, I'd kill() the tween to release it for garbage collection. @GreenSock may be around later with additional info. Happy tweening.
  22. I may start tagging you in all my posts just for the fun of it. ?
  23. Is there any reason you're using jQuery for this? I'd think it would be easier to just use pure GSAP, kill() the tween and get rid of the div with the removeChild() method.
  24. Yep, you can just keep adding to the end of timeline. Or add tweens at any position with the position parameter. https://greensock.com/position-parameter Happy tweening.
  25. You don't want all the symbols to be draggable? You could add a class to the ones you want to drag and create a draggable for that class. SVG is a deep subject so it depends on what you're trying to do, but Sara Soueidan's site has lots of good info to get started: https://www.sarasoueidan.com/tags/svg/ Happy tweening.
×
×
  • Create New...