Cassie
-
Posts
4,631 -
Joined
-
Last visited
-
Days Won
165
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by Cassie
-
-
-
Heya! Carl's a great person to follow for breakdowns - he actually covered a mouse follower like this a while ago https://x.com/snorklTV/status/1686111184603217920?s=20 https://codepen.io/snorkltv/pen/oNQJwzZ?editors=0010 I would share the end result here - but it may be for Carl's students - so I'll leave it to him to walk through it or link you to it if he would like. - I've recently made something along these lines too (We all got a bit inspired when we saw the codrops demo and wanted to give it a bash) - Mine uses some of GSAP's utils and quickTo, I'm planning on writing a post about it so I'll tag this post and pop back when it's live. ☺️
-
Really top quality answers here @alig01 - we appreciate the effort.
-
My suggestion would be to take a look at our React articles, use refs, useLayoutEffecrt and gsap.context - then check back in if you still have any issues. 99% of the issues we see with React are fixed by setting up the code correctly! ----- Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once. Here's the structure: // typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []); This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background. We strongly recommend reading the React information we've put together at https://greensock.com/react Happy tweening!
-
Hi there, Thanks for joining club GreenSock, we appreciate the support! 🥳 So, it sounds like you're aware that fixed elements need to be out of the wrapper <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> I'm afraid without seeing a minimal demo we can't help much further as this sounds very specific to your trigger points and code setup!
-
-
-
-
-
Heya! ScrollTo works very well with scrollSmoother - no worries there. I'm afraid we don't automatically replace the browser behaviour - But this thread should be a help for you. Thanks for being part of the club too 💚 -
ScrollTrigger - play audio when scroll to certain point on the page
Cassie replied to LSchneiderman's topic in GSAP
Just an additional FYI that users have to interact with the page before the audio will play. One of the allowed interactions is a 'click' on the page https://stackoverflow.com/questions/50490304/how-to-make-audio-autoplay-on-chrome https://codepen.io/GreenSock/pen/RwEGMzw?editors=1010 -
GSAP can tween more than numeric values, in this case it's tweening a string - From the docs! Sounds like a repeat would be best here, if you need more help please link to a minimal demo on codepen and I'll take a look!
-
Or just change the first value to 0.001? You can snap wherever you want! https://codepen.io/GreenSock/pen/MWZyJpV
-
The difference isn't a perf thing - you can use gsap.utils.toArray if you need an array rather than a nodelist. Depends what you're after really - Arrays are most useful because they come with a ton of built-in methods and properties like length, push, pop, forEach, map, filter, etc whereas NodeLists only have only a limited number of properties and methods, like length, bracket notation for accessing items (nodeList[0]), and for loop iteration
-
If I'm understanding - you can change your snapping points a little. //this... snap: 1 / (sections.length - 1), // could be written like this too snap: [0, 0.33, 0.66, 1] // 0 is the beginning and 1 is the end, and the decimals in between are the snapping points in the middle // so if you don't want to snap right at the beginnning (0) - you can do this snap: [0.1, 0.33, 0.66, 1] Also you'll need a vertical trigger for the first counter because it's already 'in view' horizontally from page load. https://codepen.io/GreenSock/pen/MWZyJpV?editors=0010 Hope this helps!
-
Stacked Fade-in Panels with Auto Scroll content on last slide
Cassie replied to Ziafat Ali's topic in GSAP
I just copy pasted in Rodrigo's code and it's working. https://codepen.io/GreenSock/pen/QWzNdGg?editors=0010 You can also scroll to labels like this demo which may be a better approach for you considering you're crossfading. https://codepen.io/GreenSock/pen/ExvbZXg?editors=0010 -
Actually, you don't need an onUpdate at all, you can just add a trigger and a scrollTo - https://codepen.io/GreenSock/pen/YzdqybG?editors=0010 Hope one of these helps!
-
Before digging into custom onUpdate snapping solutions, an option could just be to use the snapping functionality in scrolltrigger? https://codepen.io/GreenSock/pen/gOZraZm?editors=0010 You can view the docs for more details https://greensock.com/docs/v3/Plugins/ScrollTrigger
-
Hi there! So 'height' isn't a transform (like scale/x/y/rotation) It's a layout property. So transformOrigin has no effect on it. You currently have a centering layout effect on your card due to flexbox - justify-content: center; If you change that to justify-content: flex-start; then your elements will scale from the top. You currently have height:0 and your padding is taking up the whole element height so this may have to be styled a little differently, but here's a start. https://codepen.io/GreenSock/pen/RwEaWeG
-
Heya, happy to help here but struggling to follow a little. Could you maybe point to the bit of the code and include some screenshots or a screen recording of the issue? I'm not entirely sure what the reverse animation is or when the last frame shows up? Thanks so much!
-
Heya! So this is because adding a marker will extend the page height to wherever the marker should be - but without the marker your page doesn't have the height necessary to scroll to that point. In other words, your styling isn't allowing you to scroll that far. You have the add the scroll distance necessary in order to scroll to that point. minimal example - https://codepen.io/GreenSock/pen/eYbZpBK Hope that helps.
- 1 reply
-
- 3
-
-
There are a lot of incongruencies between your site and the demo. But to start with, you need to put all your GSAP code inside the onMounted callback. I'm not sure how to help further as your styling is too broken to really make any headway. I'd suggest getting the styling fixed first then adding animation! https://stackblitz.com/edit/github-ci9dvv-mbbzhv?file=pages%2Findex.vue,components%2FHeroAnimation.vue
-
Not sure if there's a question here or if you figured it out? But just incase - That's where refreshPriority comes in From the scrollTrigger docs
