Jump to content
GreenSock

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

Cassie last won the day on April 28

Cassie had the most liked content!

Cassie

Administrators
  • Posts

    2,384
  • Joined

  • Last visited

  • Days Won

    92

Community Answers

  1. Cassie's post in Immersive and interactive 3d journey was marked as the answer   
    This course is a wonderful place to start - 
     
    https://threejs-journey.com
  2. Cassie's post in GSAP Timline End - End at Container? was marked as the answer   
    Thanks for the demo - You can do it like this ☺️


    See the Pen MWQjmLe?editors=0010 by GreenSock (@GreenSock) on CodePen
  3. Cassie's post in reverse scrolling grid element with gsap was marked as the answer   
    That looks like a good start to me!
     
    Here you go.
     

    See the Pen NWyrBjR?editors=1111 by GreenSock (@GreenSock) on CodePen
  4. Cassie's post in Mouseover / mouseout with e.offset was marked as the answer   
    Oh ok! Gotcha.

    Something like this?


    See the Pen PooqwQy?editors=0011 by GreenSock (@GreenSock) on CodePen
  5. Cassie's post in Cloned elements and ScrollTrigger.refresh(); was marked as the answer   
    Hey there! You'll need to create a new animation for each new element added into the DOM...


    See the Pen XWVvjBv?editors=1010 by GreenSock (@GreenSock) on CodePen
  6. Cassie's post in Scroll marker colours - Feature Request was marked as the answer   
    You can!
     
    From the docs.
     
    markers Object | Boolean - Adds markers that are helpful during development/troubleshooting. markers: true adds them with the defaults (startColor: "green", endColor: "red", fontSize: "16px", fontWeigth: "normal", indent: 0) but you can customize them by using an object like markers: {startColor: "white", endColor: "white", fontSize: "18px", fontWeight: "bold", indent: 20}.
  7. Cassie's post in Hovering on menu item offsets elements Y position was marked as the answer   
    Heya!
     
    Ok so there's a couple of things I can recommend here.
     
    First up - overwrite modes. You're using true which is killing the conflicting tweens. You don't want that. You only want to overwrite the conflicting parts
    true: Any existing tweens that are animating the same target (regardless of which properties are being animated) will be killed immediately. "auto": Only the conflicting parts of an existing tween will be killed.  Next, no need for an open and close timeline.

    We can create one timeline and then manage it with control methods. like tl.play(0) and tl.reverse()- then the timeline is interruptible, if you click open and close really quickly it'll just change the direction the timeline is animating.

    Here's an adjusted demo.
     

    See the Pen ZErEZEK?editors=0010 by GreenSock (@GreenSock) on CodePen
  8. Cassie's post in Animating width/margin best practices was marked as the answer   
    I'm just going to jump in here and say that the best practices with animating width/margin are not to animate width and margin (if possible) Transforms are more performant and result in smoother animation.
     
    https://web.dev/rendering-performance/

    Maybe I'm off here and this is already the effect you're looking for (in which case ignore me!) But to me, this effect looks a little like you're trying to mask the element?
     
    This is an old pen so ignore the code - but is this kind of 'masking' the visual you're after?


    See the Pen OyarJK by jonathan (@jonathan) on CodePen
  9. Cassie's post in Problem parallax effect with video was marked as the answer   
    Hey there!
     
    Background position is a property of background images - you can't apply that to images in image tags or videos.

    It's best to animate transforms instead of background position though. Maybe this pen will give you what you need to get started.


    See the Pen OJzZpVZ by GreenSock (@GreenSock) on CodePen
     
    Good luck!
  10. Cassie's post in animate particles movement using Three.js with a mouse move event was marked as the answer   
    Hey there! That's a lot of code.

    Maybe this will help give you some context?
     

    GSAP can animate anything really, even complex three.js stuff, Blake's point was that there isn't a magic bit of GSAP code that will do all of it for you. The lions share of work will be setup not tweening values.
  11. Cassie's post in Problem with a filtered masked svg with transformOrigin, scale and firefox was marked as the answer   
    Heya! 

    Not a GSAP issue here. Firefox doesn't like percentages in SVG. It's always best to go with a viewBox and use SVG units.

    Hope this helps!
     

    See the Pen KKZOYeB?editors=1010 by GreenSock (@GreenSock) on CodePen
  12. Cassie's post in Question about hiding header on scoll was marked as the answer   

    See the Pen yLpmobq?editors=0010 by GreenSock (@GreenSock) on CodePen
     
    Cool, thanks! You just need to toggle a boolean in your open and close functions ✨
  13. Cassie's post in Limit scroll movement was marked as the answer   
    Hey there - this isn't scroll - you're looking for Observer! Hope this helps.
     
     
    https://greensock.com/docs/v3/Plugins/Observer
  14. Cassie's post in Problem using Observer plugin in Vue JS app was marked as the answer   
    Hey there - are you using the latest version of GSAP?
  15. Cassie's post in Transform translate and rotate on mouse hover was marked as the answer   
    Not sure I understand what you mean by, 'add a random number to rotate'

    But you're on the right track. I'm not really sure what effect you're after but it's all about getting values from the mouse and mapping them into a useable range.
     

    See the Pen QWaRKmP?editors=0010 by GreenSock (@GreenSock) on CodePen


    Maybe this blog post will help?

    https://www.cassie.codes/posts/making-a-lil-me-part-1/
  16. Cassie's post in Draggable on touch screen with multiple touches was marked as the answer   
    Just checking, because that demo you posted has a lot going on. This isn't working for you?

    https://cdpn.io/pen/debug/vYpMbgv <--- debug link for testing
     
  17. Cassie's post in Animating multiple split text elements on scroll was marked as the answer   
    Heya, just a scoping issue pal.

    You need to just target the characters within that heading.

    Right now you're animating all of them when the first heading hits the trigger point.


    See the Pen rNpRZYM?editors=0010 by GreenSock (@GreenSock) on CodePen
  18. Cassie's post in pin top and bottom container on scroll was marked as the answer   
    Hi there!
     
    If you need to pin sections without spaces underneath or above you need to wrap *all* the elements that need to be pinned in a wrapper.

    like so


    See the Pen YzYBRPG?editors=1010 by GreenSock (@GreenSock) on CodePen
  19. Cassie's post in Scrolltrigger fade in second section was marked as the answer   
    Hey there!
     
    Sounds like you need to position them absolutely on top of each other and fade them.

    Maybe something similar to this demo?
     

    See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen
  20. Cassie's post in v3.10 ScrollTrigger.normalizeScroll breaks disabling scroll libs was marked as the answer   
    Hey Julia,
     
    Glad you're enjoying the new features!

    So, normalizeScroll() intercepts the browser's native scrolling behavior. I wouldn't be surprised if other third party libraries break as the scroll is happening on the Javascript thread instead.

    We've made it 'opt-in' because for the majority of cases it isn't needed and ideally the browser should be handling scroll. It can be helpful to get around some issues on IOS safari, but I would recommend only using it if necessary and not as a default.

    As an option here, you could kill normalizeScroll() when the modal is open?


    See the Pen YzYdQaa?editors=0010 by GreenSock (@GreenSock) on CodePen
  21. Cassie's post in scrollSmoother on Nuxt was marked as the answer   
    Hey there!
     
    This thread should help.
     
     
    I'm afraid we can't help with nuxt-gsap-module though as it's a third party tool.
     
    Good luck!
     
  22. Cassie's post in Unset all animation was marked as the answer   
    Hey there!
     
    This is always a little more complex than just killing all animations.

    If an animation serves an important purpose, e.g fading and animating in a modal, if you kill it, then that functionality is broken. 🙃

    If they're purposeful animations - I would recommend making all your animations *superfast* e.g...

    gsap.globalTimeline.timeScale(999)
     
    If you do actually want to kill all your animations you could use...
     
    gsap.globalTimeline.clear()
     
    Hope this helps!
  23. Cassie's post in GSAP 4 was marked as the answer   
    Hey there!
     
    No spicy details to share on a v4.
     
    That being said, we haven't been kicking our heels for two years. We're still releasing updates. Just recently 3.10 came out with two brand new plugins!
     
     
    Why do you ask? Is there something you feel that we could add or something you're hoping for?
  24. Cassie's post in Should I put an attribution? was marked as the answer   
    No that's fine! You don't need to worry about attribution.

    It's lovely of you to check though.
     
    Good luck with your project!
  25. Cassie's post in Observer how block scroll? was marked as the answer   
    Thanks for the kind words, and sure thing!
     
    Maybe this demo will help?


    See the Pen ExopjNW?editors=1011 by GreenSock (@GreenSock) on CodePen
×