Jump to content
GreenSock

Leaderboard

Popular Content

Showing content with the highest reputation since 01/21/2023 in all areas

  1. Hey, many suggest focusing on the animation first and adding scrollTrigger later, as it adds more complexity and only causes confusion when it doesn't work as expected. In general, I would try to avoid nesting scrollTrigger. Furthermore, timelines are meant to be used for sequencing animations. So instead try to create a timeline outside the loop to which you then assign your animations. codepen Hope this points you in the right direction. Good luck.
    5 points
  2. Hi, The issue is due to the type of animation being applied to the main container of the page. Routing/Transition libraries normally demand that there has to be only one element to be animated. Hence we wrapped everything in a single DOM node. The animation we're using actually applies transforms to that element which causes issue with pinning in ScrollTrigger. https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children" There are two possible solutions for this. Use pinReparent on all your ScrollTrigger instances that reside inside a transformed parent or set a default for all ScrollTrigger instances: ScrollTrigger.defaults({ pinReparent: true, }); If using that approach is not an option what you could do is on the transitions configuration remove all the styles applied by GSAP on the element being animated: const onEnter = (el, done) => { gsap.set(el, { autoAlpha: 0, scale: 0.8, xPercent: -100 }); gsap .timeline({ paused: true, onComplete() { toggleTransitionComplete(true); // Removes all styles (including transforms) // once the page/route transition is completed gsap.set(el, { clearProps: "all" }); done(); }, }) .to(el, { autoAlpha: 1, xPercent: 0, duration: 0.25 }) .to(el, { scale: 1, duration: 0.25 }) .play(); }; Both options are equally valid and should work without any issues. Hopefully this solves the issues you've been experiencing. If you have any other question/issue let us know. Happy Tweening!
    5 points
  3. Here's a demo of the best (but more fiddly) way. Ideally you'd have an aria label on the text element itself rather than assigning aria attributes to a non semantic element like a div. So something like this. I would go for this route with headings, but I'd likely duplicate text for long sections of text like paragraphs. https://codepen.io/GreenSock/pen/NWMYMQr?editors=1010 Kapture 2023-01-22 at 09.43.42.mp4 Another route I've gone in the past is adding aria-hidden on split text elements, then calling revert on them once they've animated in and removing the aria-hidden. Like so... https://codepen.io/GreenSock/pen/poZaJQa?editors=1010 Obviously all these routes are worth testing with folks that actually use screenreaders if you have the capacity to do so.
    4 points
  4. Hi Sukro, Wondering if what you're seeing is FOUC, since the page will load with the HTML and CSS before it applies Javascript styles. This article might be helpful:
    3 points
  5. @Warren_A I've put the opening divs in my header.php and the closing divs in footer.php, assuming you're building your own theme as I am. <!-- opening tags in header.php --> <div id="smooth-wrapper"> <div id="smooth-content"> <!-- closing tags in footer.php --> </div><!-- #smooth-content --> </div><!-- #smooth-wrapper --> <!-- Opening tags go at the bottom of the header.php TIP: any "position: fixed;" elements you should put outside these tags (before opening them). Closing tags go right before <?php wp_footer(); ?> and </body> closing tag. And your overall HTML structure should be correct i.e. no unclosed divs or too many closed divs by mistake. -->
    3 points
  6. Hi there. That's very pretty simple animation to get going with. The rocket would just be a tweening up and to the right https://codepen.io/GreenSock/pen/JjBvpBL The boxes on the outside that are gently moving could be animated nicely with a stagger https://greensock.com/docs/v3/Staggers Hope that helps!
    3 points
  7. I'd say most of the time, if you want to set funky start positions for rectangles it's probably best / easiest just to use a path as @alig01 suggested. However, using the width and height you can calculate the top center and bottom center coordinates. https://codepen.io/snorkltv/pen/wvxjJwP?editors=1010 If you add rx attributes to both it will require some tweaking of the numbers, which again would bring us back to a <path>
    3 points
  8. Hey, your guess is correct, the error is in .list li. In your forEach loop, you iterate over your lists. So the element is your current list, which means you can target its children. I tried this in a pen, however I was unfortunately unfamiliar with the old syntax, so I rewrote it a bit (probably missed something). You could find the guide here. codepen Hope this helps.
    3 points
  9. Hi @AlejandroAlonzo welcome to the forum! You had it set up that the previous trigger created the next trigger, so only when the previous trigger was completed the would the next animation be crated, if you thus want to jump to animation 03, it doesn't work, because it hasn't been created yet. I would how ever also suggest looking in to https://greensock.com/docs/v3/Plugins/ScrollToPlugin you have it already loaded, and as the name implies it will scroll to the specific part on the page, instead of the browser just jumping to that part of the page. It is always great to first create working code before optimising, I personally would have like that you tried your hand your self at a looping version and posted both versions, that way we could see what your thought process was and how we could better help you. I would encourage you to read through my version and see if you understand what is going on, I've just copied one version of your setup and placed it in a .forEach loop and just filled in the blanks and scoped everything to that particular trigger in the loop. I don't see what you mean? You are using the GSAP 2 syntax in your code I would recommend using the v3 syntax, much more readable. And you are using some really fast animations 0.01 translates to 10ms which is really fast! If you don't want animations and just have it change instantly just use a .set() instead of a .to() tween. I Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/eYjMqBq?editors=1011
    3 points
  10. You could use the SplitText plugin and animate the words: https://codepen.io/medienbaecker/pen/yLqKEQX
    3 points
  11. Hi, i'm not exactly sure what effect you are going for. FWIW it seems a bit disorienting to move something down to a y:200 while scrolling up. That aside I would avoid creating 2 timelines initially time that control the same properties of the same thing. To avoid conflicts I would suggest creating these animations fresh when you need them inside your callbacks sort of like: ScrollTrigger.create({ trigger: ".top-page", start: "top-=100 top", end: "top+=200 top", markers: true, onEnter: () => {let tl1 = gsap.timeline({}) .fromTo("header", { y: 0, overwrite: 'auto' },{ duration: 2, y: 200, ease: CustomEase.create("custom", "0.5, 0, 0, 1"), overwrite: 'auto' })}, onLeaveBack: () => {let tl2 = gsap.timeline({}) .to("header", { scale: 1.2, y: 200, }) .set("header", {y: 200,scale: 1,},"hide") .to("header", {opacity:1},"start2") .to(("header"), { y: 0, duration: 1, ease: "power4.out" }, "start2")} }); I would also remove locomotive scroll until you know things are working fine without it. Hopefully this set up will allow you to remove some of redundancy between the 2 animations like tweening and setting y:200 multiple times. If you need more help please try to simplify the animations as much as possible in a fork of the original pen.
    3 points
  12. As you can see from the logs I added in the onUp and onDown callbacks, Observer's onUp works just fine - what fails is your custom logic. You are getting an error in console that points you to what is wrong funcs[index] is not a function If you log out the different indexes you are working with, you will notice that you are pointing towards an item of an array with a negative value for the index in multiple occasions, and arrays inherently do not have / work with negative indexes. So you will need to rework your logic with that regard, to make it work. BTW, you have a typo in your Observer: targer --> target https://codepen.io/akapowl/pen/poZLjpZ Edit: One suggestion I have is taking a look at GSAP's utility methods. Here is an example of how you could e.g. use .wrap() to wrap around your variable value to the last one in your array, if it becomes negative. Click anywhere on the body in this example to decrease the variable I'm working with by 1. https://codepen.io/akapowl/pen/QWBmjJB ... the wrapping also works in the positive direction, btw. https://codepen.io/akapowl/pen/QWBmyLJ
    3 points
  13. The only thing I can tell you for sure, is that you should call a ScrollTrigger.refresh() after you have created your ScrollTriggers when useing ST with locomotive-scroll, as is also noted in the demo on the .scrollerProxy() docs-page - right now you are only doing it after you created the smooth-scrolling instance and the scrollerProxy(). [...] // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); Apart from that, there can be dozens of reasons for your issue - might be that you need to make sure your images are loaded before you create your ScrollTriggers (or call a .refresh() after they are fully loaded) but it might as well be something very different; possibly not even related to ScrollTrigger. After applying the suggested fixes to your current demo, I can not see the behaviour you mentioned at all. Since we can not really offer advice from looking at screenshots, because there are just too many possible problem-sources in a complex scenario like this, please add a minimal demo showcasing your issue, if you need further assistance on this.
    3 points
  14. Nah there's tons of ways round this! One route is doubling up content. You visually hide one so sighted people don't see it, but screenreaders read it out still, then whack aria-hidden on the one that's being split. https://www.a11yproject.com/posts/how-to-hide-content/#:~:text=visually-hidden class is applied,focus indicator had gone to. <h2 class="visually-hidden">This is a sentence</h2> <h2 class="split" aria-hidden="true">This is a sentence</h2> .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } Another option is using aria hidden on the header and an aria label and role on a containing div <div role="heading" aria-level="2" aria-label="word"> <h2 class="title" aria-hidden="true"> <div>w</div> <div>o</div> <div>r</div> <div>d</div> </h2> </div> Another one would be to loop round the children that splittext creates and whack aria-hidden on them and an aria label on the text element. I raised this casually with Jack the other day about seeing if we can bake an option in so it's a little easier for people. Either way though, plenty of ways around this!
    3 points
  15. Hi @BruceST! On your gsap.to that control your .one-one height, add this parameter: onComplete: () => { ScrollTrigger.refresh(); } https://codepen.io/sam-tremblay/pen/OJwzwmz Happy Tweening!
    3 points
  16. Hi there - Looks like you're trying to pin elements using position 'fixed' inside a transformed container. This isn't a GSAP bug - just a browser limitation. You can use pinType: 'transform' to fix this. Also just a heads up that we have our own scroll smoothing plugin that works around a lot of annoying edge cases and browser bugs. https://greensock.com/scrollsmoother/
    2 points
  17. Well, as with everything, the devil is in the detail, which is why it is very hard to give general recommendations for a more complex scenario like yours. Since you are concerned about things not working when reloading the page when it's scrolled down, you might want to reconsider the general approach of how you implement the change of the backgroundColor, too, because the way you are doing it in the demos you posted, things will not work as you might intend in that case. One logical problem is the following: You are changing the playstate of pre-built timelines with.to() tweens in callbacks of ScrollTriggers, when the page is loaded at the very bottom, ScrollTrigger will make sure that those callbacks get called. So now you have multiple tweens being called quickly one after the other, which are all tweening on the same property of the same element, so you are creating conflicting tweens. When you scroll back up then, the .to() tween is supposed to be reversed, but it will probably reverse back to the color that it was at the time when that tween was being created - which very likely is not the color you'd expect but some value of a color in between all those colors. Creating your tweens upfront can be quite the tricky scenario to begin with, when you are going to tween on the same property of the same element with multiple different instances. So one way you could prevent all those logical hurdles, would be to create the tweens in the callbacks directly instead of pre-building them. Then you could either use .fromTo() tweens to make sure you always tween from one specific color to another specific color, when the callback runs, or .to() tweens with overwrite set to 'auto' to prevent conflicts I mentioned above. In this pen with the lottie-scrolltriggers handling the pinning themselves, things seem to work fine even if I create those ScrollTriggers before all the lottie-scrolltriggers, but your mileage may vary. https://codepen.io/akapowl/pen/gOjKLqy
    2 points
  18. I'm not completely sure what animation you're referencing. And on this forum we love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or "how do I recreate this cool effect I saw on another site?" tutorials. That said most of the animations seem to be using some sort of mask which they then morph to different shapes. The MorphSVG seems to be the perfect candidate for that, see the morphSVG plugin And here are some topics that might get you started. Hope it helps and happy tweening!
    2 points
  19. Hi there. Your ScrollTrigger is set to end 10,000 pixels after it starts - but since you are not pinning anything, you will never actually have that much height to scroll through on your page. So you might want to change something with that regard. In this fork of your pen you can see that ScrollTrigger actually works just like you tell it to, if there is enough scrollable space; I just set a min-height to the body to demonstrate that. https://codepen.io/akapowl/pen/dyjKGVX Consider having another look at the ScrollTrigger docs - with regard to end it might also be helpful to have a look at endTrigger. https://greensock.com/docs/v3/Plugins/ScrollTrigger Also it sounds to me, that you actually want two tweens of a timeline to trigger at the same time, so you might want to have a look at how to use the position parameter of tweens on a timeline.
    2 points
  20. Hi @Rodrigo Thanks so much for your quick response! I've just implemented your code update and it looks like it's working perfectly so thank you for all of your help, Dayne
    2 points
  21. Hey - so right now your tweens are both the default duration - 0.5seconds. If you want the second one to last longer you'll need to change the duration - something like this. t0.from(".one", { duration: 1 }) .to(".two", {duration: 2})
    2 points
  22. Hey all. I think, using the string syntax for start / end with only one parameter, like you do throughout your codepen demo, @Gigi1303, is actually not valid ( as in e.g. start: "top" for instance ) and is bound to lead to problematic behaviour. You can use a singular value as a number (not in string form) and it will translate to the absolute scrollposition on the page or as a relative value in case of the end, like "+=100%". But other than that, when you use the string syntax, you are supposed to give two parameters, as in "top top" with the first referring to the element and the second referring to the viewport (as explained in the ScrollTrigger docs). Maybe try and change that in combination with the other suggestions you've already gotten, and see if it helps. For confirmation, here is @GreenSock mentioning this in one other thread (among many):
    2 points
  23. It still sounds to me like a rethink would be ideal here - if you remake it with some tweens instead of classes then ScrollTrigger will understand what's going on and you won't have these conflicts. Rodrigo's pen is a simplified example, but you could easily add a container in there if you needed. The concept of using GSAP to animate instead of classes is the same Feel free to give us an updated codepen with a little more complexity for us to take a look, but please no dev links. I'm afraid we don't have the resources to be looking through live sites.
    2 points
  24. Hi @BruceST, you where already using the position parameter and with this you can also set a relative offset to a tween, eg "-=0.3" will start the animation 0.3 seconds before the previous ends. In your setup the only tricky part is that you don't want this to happen with the first item. So what I did is check if the index of your loop is not 0 and then add this offset to your tweens. Keep in mind that a default tween in GSAP (if you do not define it) is 0.5 seconds. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abjGqqV?editors=0010
    2 points
  25. Alright, I see. Then you'll probably need some sort of calculation anyway. Just for inspiration, here is an alternative. I make use of the endTrigger here, so I can use one trigger-element for the start and another trigger-element for the end. Also I get the values directly in the start function, so there's no need to re-populate any variable on resize. The calculation there is based on the padding of the section plus the offsetHeight of the subtitle + the 32px you mentioned you wanted in between the pinned elements. As a sidenote: I had to add a fixed height to the h2, as your h2s are empty and things got a bit wonky when pinning the intro element. Maybe this will help somehow. https://codepen.io/akapowl/pen/gOjzmmX endTrigger String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default.
    2 points
  26. Awesome thank you I really appreciate it! I in fact tried to use element, but I believe I had the stagger on the child elements incorrect at the time. I guess I'm unfamiliar with the new syntax Ill have to brush up. Thanks Again!
    2 points
  27. About an hour after posting this, it dawned on me that I was more than likely going about this in a very convoluted way. Your solution is brilliant, simple, and elegant. I'm sure I can make this work with some fiddling. Thank you so much, this is exactly what I'm looking for!
    2 points
  28. Fun idea! But yeah, definitely not the right approach here. Good attempt but that's a lot of markers! So I would maybe do something like this? We even have textPlugin to make this kind of thing nice and easy https://codepen.io/GreenSock/pen/ExpLVzB?editors=1010
    2 points
  29. Hi @Carl! The fix was indeed needed to put a wrapper around the element I wanted to animate.
    2 points
  30. Hi there - I'm afraid that property's not animatable. Not a GSAP thing - just not a possibility. Here's another option for you! https://codepen.io/GreenSock/pen/NWBYwjv?editors=0110
    2 points
  31. Thanks @Rodrigo - incredibly helpful and much appreciated!
    2 points
  32. Hello. That is the case, because you populate your variables with the relevant values once on load, and then always work with the same variables without ever updating their values. If you want things to be recalculated on resize, you will need to get the relevant values again on resize (best on the revert event of ScrollTrigger) and repopulate your variables. Here's an example for that - although I'm not sure this is what you really want as those values for the start can become (or in some cases depending on window/image size already are) contradicting to the end of 'bottom bottom' you have there, which will be reached before the start in a vast majority of cases, the way I see it. So maybe explain what it is you are trying to achieve, and we can see if there is a better way to do it !? https://codepen.io/akapowl/pen/VwBXWOm
    2 points
  33. Hi Sam, I think you are over-complicating things quite a bit IMHO. This setup seems to work as you expect with ScrollSmoother: https://codepen.io/GreenSock/pen/QWBmgeV Hopefully this helps. Happy Tweening!
    2 points
  34. Sorry, but I don't have the time to wade through all that logic, especially since I can't even imagine what outcome you expect and your initial setup in combination with the elements then suddenly jumping off-screen before tweening in, doesn't make that much sense to me. Also it is quite a bit out of scope from what to expect from this forum, please see the Forum Guidelines. From what it looks like to me, you are creating your timelines upfront and then only adding more and more tweens to them when calling your functions - not sure how much that does affect things, but that doesn't look quite right to me. I'm also not sure you need functions to begin with; couldn't you just create your timelines upfront and iterate through those pre-made timelines in your logic. For your convenience, here is a rather simple example with the logic transfered to click-events rather than scrolling. https://codepen.io/akapowl/pen/OJwvXYz
    2 points
  35. First off, if you want to animate things with GSAP you can't use transitions in your CSS, if you do CSS and GSAP will fight for control over who gets to animate and the browser will thus insert a transition each time GSAP animates something. Personally I like to start with the animation it self. The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. With this I always like to start with a timeline, so that I can easily toggle ScrollTrigger on and off. start: 'top bottom', means when the bottom of the browser hits the top of the element play the animation, this doesn't really work, because the start trigger will then always be below element trigger. I've now set them to be on the top with an offset of 200px, so that you can see when it happens. I had to rewrite your setup and because nothing much changes between the left or the right I just check if the element has the .right class and change it xPercent value. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PoBRGoQ?editors=1111
    2 points
  36. @alig01 Wow, Thats great!, nice use for the "forEach" for this, thanks for teaching me !.
    2 points
  37. Hi, For that you have to set edgeResistance to 1. From Draggable docs: Number - A number between 0 and 1 that controls the degree to which resistance is applied to the element as it goes outside the bounds (if any are applied), where 1 won’t allow it to be dragged past the bounds at all, 0.75 applies a lot of resistance (making the object travel at quarter-speed beyond the border while dragging), and 0.5 would be half-speed beyond the border, etc. This can even apply to rotation. Since this can be triggered by both the button or the Draggable instance you'll have to define a snap function in order to toggle the active class. This would imply that you have to set up the snap threshold as well, but in this case is quite simple because you have the height of the element. In this case I set it up to snap if the dragged distance is more than 1/3 of the height, but you can play with it and find the value it works better for your scenario: const draggable = Draggable.create(".panel", { type: "y", edgeResistance: 1, inertia: true, snap: { y: (point) => { if (point > $(".panel").outerHeight() / 3) { $(".open").toggleClass("is-open"); return $(".panel").outerHeight(); } return 0; }, }, maxDuration: 0.4, minDuration: 0.1, bounds: { minY: 0, maxY: $(".panel").outerHeight(), }, }); Hopefully this helps. Happy Tweening!
    2 points
  38. Genius! That makes so much sense. I'd logged out a ton and couldn't figure out what was going on. 🏆
    2 points
  39. I think the reason for why it doesn't work properly after a page-transition, boils down to the fact, that for a certain period of time within barba's lifecycle, both, the old and the new container will live together in the DOM. Now while you are initiating your new locomotive-scroll instance everytime with reference to the new barba-container, your scrollerProxy is only being created with reference to '.smooth-scroll', which will be available in both, the old and new container at that time - and since the old container sits above the new in the DOM tree at that time, you will be referencing the old container's .smooth-scroll with that. You can check the difference between the two elements you are targetting by logging out console.log(smoothScroll.parentElement.getAttribute('data-barba-namespace')) vs. console.log(document.querySelector('.smooth-scroll').parentElement.getAttribute('data-barba-namespace')) in your initSmoothScroll function. So you can either simply just change the element you are targetting in your scrollerProxy to be the same you are targetting when creating your locomotive-scroll instance, or alternatively just remove the old barba-container at the proper time since you don't need it for your type of page-transition anyway. Both options resolved things for me. Hope they do for you, too. Thanks for the heads-up btw @Cassie - was scratching my head for a minute or two there, before I saw that.
    2 points
  40. Hi @Cassie. Thanks for the confirmation. That is great news. I was hoping I didn't have to use both. When I said I was trying to tie animations to scroll speed it looks like the term I was looking for was "velocity". I found the Greensock Codepen that shows how to do it so I'll leave this here for anyone else who was looking for the same thing and comes across this post. https://codepen.io/GreenSock/pen/eYpGLYL
    2 points
  41. Ahh ok what Cassie said 😆
    2 points
  42. That being said - You could use a loop and a stagger. But honestly, readability is so much better to aim for than DRY or any other 'best practice'. Write whatever makes sense and is readable to you. As you learn you can gradually abstract stuff away and tidy things up. But premature optimisation is a speedy route to headaches and confusion! https://codesandbox.io/s/infallible-voice-ccobfd?file=/script.js
    2 points
  43. Nothing wrong with that at all! Honestly I'd prefer readable repetitive code over 'clever' DRY code any day. I can't find the source but this came to mind -
    2 points
  44. Hi there! Yeah - ScrollSmoother is our smooth scrolling library. No need for locomotive anymore. A note: You don't need ScrollSmoother to tie animations to scroll speed - that sounds like you may be looking for ScrollTrigger's - scrub:true
    2 points
  45. New option on GSAP 3.11 (Works like Magic): https://greensock.com/docs/v3/GSAP/gsap.matchMedia()
    2 points
  46. interesting... Thank you! First time using gsap so this is amazing support - appreciate it!
    2 points
  47. While this doesn't seem to affect anything, it sure is problematic - there is occasions when you can get both instances to scroll, and if they both report back different data to ScrollTrigger, I assume ST is going to be very confused and you won't see the results you expected at some point. I simply just added some custom console.log('...')s to the hooks you are using. That line you mentioned is not what I was talking about though. I was referring to locomotive-scroll's data-scroll-section attribute, which according to their docs can help improve performance for locomotive-scroll - but as I said, it will most likely cause conflicting behaviour with ScrollTrigger. Here are some examples in vanilla JS to show how the points I mentioned above do create issues. [Edit: Keep in mind, that those examples need to be opened in a seperate window, because with a viewport as narrow as the preview's iFrame, locomotive-scroll will default back to native browser scrolling] This is the basis for all the examples; here with native browser scrolling - works fine, all good. https://codepen.io/akapowl/pen/yLqpZxK This here is the same example but with locomotive-scroll's default behaviour implemented, not using the data-scroll-section attribute - works fine. https://codepen.io/akapowl/pen/bGjazzR And here is that exact same example, only with the data-scroll-section attribute added to the individual sections (similar to what you are doing in your demo) - this is what I meant with my 3)rd bullet point. As you can see, things become problematic with the pinning ScrollTrigger there, on the second section. https://codepen.io/akapowl/pen/qBypvWW Last, but definitely not least, here is that basic locomotive-scroll example again, but this time with the order of creation messed up. In this example I create the ScrollTriggers first, before I even initialize locomotive-scroll and set up the scrollerProxy etc. - again, not working too well. https://codepen.io/akapowl/pen/XWBVGrG So all in all, I think that's where (at least some of) your problems stem from, although I'm not saying that this is definitely all, as I didin't have the time to check every single bit in your code. The biggest sources of your problems seem to be a) React - its double-calling in Strict Mode and its order of creating your page in general; and b) locomotive-scroll and its data-scroll-section attribute that isn't really compatible with ScrollTrigger.
    2 points
  48. Hey, yes, such effects are easily done with gsap. I gave it a quick try, but I'm not entirely sure if it's the best approach, but it should definitely be sufficient for showing. https://codepen.io/alig01/pen/GRByMjg?editors=0010 For the first approach, you need to be a member of Club Greenstock, which includes the paid plugins. If you ask me, it's definitely worth the price since you can accomplish so many other animations. Hope this helps.
    2 points
  49. Hey everyone! I've been working on a fun demo project called TweenPages to show how I do complex page transitions with GSAP in Next.js. I haven't shared it yet with anyone publicly until now. Would love to get some early feedback. Especially on the docs where I go into detail on the code side of things. Am I doing it right? Am I doing it wrong? Are there things I can improve? Fun! - https://tweenpages.vercel.app/ Docs - https://tweenpages.vercel.app/docs Code - https://github.com/johnpolacek/TweenPages Hope the project helps anyone who want to do GSAP animations like these on Next.js.
    2 points
×