Jump to content
GreenSock

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

Leaderboard

  1. OSUblake

    OSUblake

    Administrators


    • Points

      340

    • Content Count

      6,584


  2. Cassie

    Cassie

    Administrators


    • Points

      310

    • Content Count

      754


  3. GreenSock

    GreenSock

    Administrators


    • Points

      273

    • Content Count

      17,092


  4. akapowl

    akapowl

    Moderators


    • Points

      136

    • Content Count

      1,061


Popular Content

Showing content with the highest reputation since 06/25/2021 in all areas

  1. Ooh, this was a fun experiment. I just pasted the SVG <path> data string into the CustomEase editor to convert it, then copied the results into a CustomEase that's used in an animation of the dot's "y" value to -140 because that's the tallest peak and BOOM: https://codepen.io/GreenSock/pen/abWLgwY?editors=0010 🎉 That'll be much more performant than that StackOverflow post thing that constantly loops to try to find the closest x value.
    8 points
  2. You may get some use out of insertBefore (some information seen here) like the below two examples. https://codepen.io/osublake/pen/YXoEQe https://codepen.io/GreenSock/pen/yLYJodZ Edit: Sorry @GreenSock, I just looked at your Pen after the fact, which is what you are doing. ☺️
    6 points
  3. Hey @Creativist-Lab You are first setting up your variable paragraph to get the p in each wrap and then you are overwriting that variable, adressing all p in the document with SplitText. What you'd want to do is set up a new variable for your SplitTexts and use that variable you created beforehand to only address the p in that specific wrap. Something like this: let heading = element.querySelector('h2') let paragraph = element.querySelector('p') let splitParagraph = new SplitText(paragraph, {type:"lines"}) https://codepen.io/akapowl/pen/
    6 points
  4. Welcome to the forum, Cristian! Maybe you want to pin the whole section instead of the container? On the text-changing: Since you are making use of a timeline for the circles here anyway, you could just add tweens for the text and position them on the timeline making use of the position parameter. Maybe something like this (note: this doesn't actually animate; it just exchanges the text in this demo) https://codepen.io/akapowl/pen/441b68fc0191c534a9a0109015b18cf8
    6 points
  5. Ah. I guess the line shouldn't be moving at a consistent pace in the background. It would take longer for the dot to traverse the big peak than the long horizontal section. You can use SVG paths as easing curves with custom ease.... maybe there's a solution there.
    5 points
  6. Hey informanimated and welcome to the GreenSock forums. You'd need to position it so that one copy is to the left of the viewport instead of to the right, making sure that the wrapping is happening for the updated positioning. You'd also need to change the sign of the x value in the animation.
    5 points
  7. Here's a demo accordion. Accordion (codepen.io) Based on techniques from this thread.
    5 points
  8. Again, thanks for assisting with my question! If you're interested in what that pen was working towards, here is a little pen I threw together leveraging GSAP. https://codepen.io/ekfuhrmann/pen/QWvGBjz
    5 points
  9. Yeah, you're going to want to find a way to get each paragraph to sit on top of each other, which is totally up to your css positioning method of choice. Using position absolute on a container div for each paragraph is probably the most common approach and totally fine. I'm a fan of the grid layering technique shown below. https://codepen.io/snorkltv/pen/OJmmmPK?editors=0100 Scrolling through things to fade them in and out is tricky and not the best user experience. In my demo above its pretty easy to scroll fast and just blow right through each section.
    5 points
  10. ... just a little joke. https://codepen.io/mikeK/pen/GRmWYMg Happy tweening ... Mikel
    5 points
  11. Welcome to the forum @Sree Usually it's best if we can see what you tried reflected in your codepen demo and try to help you from there, because people on this forum just don't have the capacity to code out custom solutions for everyone. With regard to this, you'll want to take a look at ScrollTrigger's .matchMedia which is built for exactly doing that (i.e. having different ScrollTriggers active for individual different screensizes). I just quickly threw it in there with your setup and it's already working as I'd expect it to work, so
    5 points
  12. Hey @Mohd Rejoan If you want smooth-scrollbar to work with the markers, I'd suggest following the approach of the demo in the .scrollerProxy docs - i.e. not using it on the body itself but using a dedicated scroller. Since the markers are placed on the body but you are applying transforms to the body with the smooth-scrolling, they will simply just 'scroll' with the flow if you use smooth-scrollbar (properly) on the body due to how the smooth-scrolling works - I said properly there because you actually have some flaws in your code (e.g. not updating ScrollTrigger on 'scroll' of smo
    5 points
  13. @OSUblake -- Turns out I was waaaaay over complicating. Technical-issue Tuesdays, I guess. @GreenSock, This makes perfect sense! Thank you!
    5 points
  14. I suspect the issue is that you're changing the repeatDelay on every repeat. I would definitely NOT do that. Remember that changing the repeatDelay doesn't alter that animation's startTime, thus it'll change where the parent timeline's playhead lines up (and of course the parent's playhead controls where that animation's playhead is too). Here's an image that shows what happens if after the first repeat you change the repeatDelay (red) to 25% of what it was: Notice that as soon as you make that change, the playhead jumps to part-way through the 3rd iteratio
    5 points
  15. Hey @Brandonjhz You should be able to set once: true for it to only trigger once. Once Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".
    5 points
  16. Hi Aitor! You should use backgroundImage. background isn't an actual computed property, as it's shorthand that combines everything.
    5 points
  17. Heya @sosilver! You can tween the progress of a tween or Timeline. It's probably one of my favourite GSAP tricks. That may be a nice solution. ☺️ https://codepen.io/GreenSock/pen/JjNbyGv?editors=1010
    5 points
  18. You don't have to use toggle. Try onEnter
    5 points
  19. You can animate strokeDashoffset, and all other svg attributes in gsap just as you would any other property. Maybe your target isn't accurate for your animation? also make sure your case is correct strokeDashOffset strokeDashoffset https://codepen.io/ryan_labar/pen/GRmqbpY For fine tuning your strokeDashArray animation, check out the DrawSVGPlugin: https://greensock.com/docs/v3/Plugins/DrawSVGPlugin Also, we don't recommend using ScrollMagic. GSAP has ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollTrigger
    5 points
  20. Since you're using your param as state, you shouldn't need to pass it directly into the function, as it's an easily accessible variable, and since ticker is going to be constantly running, it'll be able to read that without specifically passing it in via (). Another thing to note: unnamed arrow functions don't cleanup nice inside of ticker / event listeners. You'll want to separate your functions if you can and access/cleanup like: gsap.ticker.add(funcName) gsap.ticker.remove(funcName), which is important with apps like react, otherwise you can end up with unexpected results where you're do
    5 points
  21. Hi Kire! You can change the timeScale like so. tl2.reverse().timeScale(2); tl1.play().timeScale(1); Another interesting thing you can do is tween the properties of an animation, like it's progress. let tl = gsap.timeline({ paused: true }) ... gsap.to(tl, { progress: 1 }); So maybe we do something like this. We just need some logic to keep track of what is currently active and what to play next. Multiple Timelines (codepen.io)
    5 points
  22. Hi dagangyang! Not sure how you want that to work, but if you want to combine both, you should probably have a certain area to trigger the rotation. GSAP Drag and Rotate (codepen.io) Using vectors. GSAP Drag, Rotate, and Scale (codepen.io)
    5 points
  23. Hey, I tried doing it with split text. One timeline is for animating the texts, and other for taking the container up. Adjust the time and distance according to your actual text. Hope this helps. https://codepen.io/tripti1410/pen/YzVPpjP
    5 points
  24. It sounds like you instead want the stack of images to fade through as you scroll? If so then you can remove the pin, try scrub: true, adjust the start &/or end values and play around with the next var (stagger) and fade var . Just play around until you get everything to your liking (if you want to stick with that example). The ScrollTrigger Docs have detailed information on those things along with links too many ScrollTrigger examples and demos. I sugggest you take time to get familar with the usage.
    5 points
  25. Welcome to the forum @LivingInAZoo This codepen by @mikel seems to have most of what you described. Hopefully you can modify it to your own needs by using it as a starting point while using the documentation to assist you further. https://codepen.io/mikeK/pen/NWRoQJo
    5 points
  26. This seems to work, but I don't know if that's the best way to do it. Again, the three.js forums might be able to offer up a better solution. let proxy = { get time() { return mixer.time; }, set time(value) { action.paused = false; mixer.setTime(value); action.paused = true; } }; Three.js GLTF Loader (codepen.io)
    5 points
  27. Hey @DexteRs Code, Maybe you could implement this logic with two stagger-tweens at a proper time https://codepen.io/mikeK/pen/zYwOzZq Happy tweening ... Mikel
    5 points
  28. Hey @hmontelongo, Welcome to the GreenSock Forum. https://codepen.io/mikeK/pen/wvdwKXb Happy tweening ... Mikel
    5 points
  29. This came up on StackOverflow. Here's another version of Blake's pen which might be helpful for future readers: https://codepen.io/ZachSaucier/pen/gOWGKQZ
    4 points
  30. As someone who gets paid to implement solutions like this, I'm often glad that a workaround is required. @Cassie just taught me something that I can use to impress my customers: giving the impression of a smoothly animated box shadow that I can throw behind buttons/cards to add depth to my designs without introducing jank. Given the fact that it's not straightforward, it's going to be that much harder for other developers (competitors, peers, etc) to implement, which adds value to my offerings. If web design was straightforward, easy, and simple, I'd be out of a job. So while I'm op
    4 points
  31. Welcome to the forum @brandonifi. You could just pin the surrounding container instead. Not that it is the case in your demo, since you don't have more than that one ScrollTrigger here, but it is worth mentioning that this will lead to misallignments on elements you want to trigger animations later on though, since they can't take that pin-spacing into account. That will be a good usecase for the pinnedContainer property then. Here is a demo with a scrub on that very last section showing what I mean. Hope that helps. Happy scrolling
    4 points
  32. You've got a bunch of logic issues where you're creating overlapping/conflicting animations. A few tips: You don't have to create a timeline if you're only going to populate it with one tween. Just put your ScrollTrigger on the single tween instead and skip the timeline. It's fine to do it the other way, but it's just a tad wasteful. By default, ScrollTrigger animations will render immediately which means they lock in their starting/ending values right away to maximize performance. In your case, though, you had one TWO animations affecting identical properties and you wanted the
    4 points
  33. I really like Algolia's API Reference documentation. They explain in details each options quite a clear way. https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/ They also have a guide section with different use cases. Nextjs example folder in their Github is also such a good one. It helped me a lot to get started. I know you are using Codepen but perhaps having a single place with all the examples would be amazing. https://github.com/vercel/next.js/tree/canary/examples Stripe is also a really great one https://stripe.com/docs/api/payment_metho
    4 points
  34. Hi @Nitro Interactive, Can you provide an example of your setup? React should scope your timelines to each component, so the defaults for the specific timeline should be scoped the same, unless you're setting GSAP's global defaults.
    4 points
  35. Because it is fun ... https://codepen.io/mikeK/pen/PomGKON Happy tweening ... Mikel
    4 points
  36. Hey @BhanuSingh, You can morph a single shape (path) to another shape (path). Not a complete group of paths! MorphSVGPlugin.convertToPath: Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but what if you want to morph a <circle>, <rect>, <ellipse>, or <line>? MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); You don't need a conversion for a path. Does that help you further? In the DOCS are a lot of examples.
    4 points
  37. Performance all comes down to how complicated it is for the browser to render whatever changes you are telling it to do. Transforms and opacity are super fast. Sometimes filters are too, but all it depends. Box shadow is super sloooooowwwwwwWWWWWW. Try getting rid of that. And try adding will-change to the elements you are animating. .container { will-change: transform; } CSS containment can be another performance booster, but sometimes it can mess stuff up. You just have to test and see. .container { contain: content; } https://developer.mozilla.o
    4 points
  38. https://codepen.io/snorkltv/pen/vYOOgBQ
    4 points
  39. Exactly what I'm looking for, thank you @mikel Looks like I'll be buying a membership, seems like a great community.
    4 points
  40. Sounds like you're just using the SVG as an image in canvas. You have to draw the paths in canvas and scale the context, although I doubt you're going to get a huge performance gain. It will probably be faster, but not like 100x. WebGL might be a better an option. https://codepen.io/osublake/pen/WzbKLQ Yeah, that's huge. You screen is raster. Think about how many pixels it has to calculate and how much memory that is going to use. There is no silver bullet when it comes to mobile. Sometimes they just don't have to the power to do
    4 points
  41. Dear GSAP Team, As promised, I finally get to present my work to you. Without GSAP this would never have been possible. THIS IS NO AD. I just wanted to show what I've done with your incredible tools. https://www.remymartin.com/vsop-limited-edition/ https://www.remymartin.com/xo-red-limited-edition/ https://www.remymartin.com/xo-gold-limited-edition/ https://www.remymartin.com/1738-limited-edition/ There is also a digital greeting card generator. https://www.remymartin.com/eoy-wizard And this card I created for you, the GSAP team. https://ww
    4 points
  42. ... just like here ??? https://codepen.io/mikeK/pen/qBmbEJR?editors=0110 Happy tweening ... Mikel
    4 points
  43. Hey @AkhilRaja, I feel like I've already given you some direction on how to trigger animations for individual sections in a fake-horizontal-scroll scenario in this recent thread In your codepen above, you did not set an end for your ScrollTrigger - which makes it pretty much unusable - so I suggest, you change that. If you set it to... end: "+=" + (document.querySelector('#PageWrap').scrollWidth - window.innerWidth) ...you won't even have to worry about that 'offset' for your calculations to take into account I mentioned i
    4 points
  44. Hey @Kire, Another option https://codepen.io/mikeK/pen/KKmdMdX Happy tweening ... Mikel
    4 points
  45. If you want the dragon to fly in both directions, here is an example: https://codepen.io/mikeK/pen/KKWNvNL Happy scrolling ... Mikel
    4 points
  46. @sam_tween_journeyer hey, Here it is with scroll trigger. https://codepen.io/tripti1410/pen/rNmVymx?editors=1010
    4 points
  47. Hey @Peach2tm, There are different options / ways. Here are a few https://codepen.io/mikeK/pen/3e1f3430764662349f3009efbfa2c064 Sorry it is still the old GSAP syntax! Happy tweening ... Mikel
    4 points
  48. Hey pal - Staggers are a good way to 'offset' the elements. You can also use random values. Does this help? https://codepen.io/cassie-codes/pen/f5b72843034a3bc63f179eba9589b15f
    4 points
  49. Simple conversion (fork) of @mikel 's demo above to GSAP 3: This may be somewhat of a trivial post to add. But since I'm new here, I thought I would try to adopt a practice of sharing as I learn. That way I'm not all take, take, take. Maybe this will make it that much easier for some other newb like me, though the Migration Guide is plenty helpful already. Only changes are naming/syntax edits in the javascript and replacing the TweenMax resource with GSAP 3. Please feel free to inform me of corrections. Thank you! Seems to still work though. 🙂 https://codepe
    4 points
  50. Hey, This article will help. https://www.motiontricks.com/svg-dashed-line-animation/
    4 points
×