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

      272

    • 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 was a fun challenge for me to show how Flip plugin can make this a lot easier... You can get rid of all your calculatePosition() stuff and all the pre-calculated tweens (you want them to be dynamic anyway since the user can drag to various spots) For the activated zoomed-in state, we can re-nest the item so that it's no longer in the <ul> at all, but sitting higher in the DOM. That way you can simply write some CSS styles for how you want that state to look. In my demo, I added an "active" class. When someone clicks to zoom-in, we'll do a FLIP animation. We captu
    4 points
  30. Hey again @Peach2tm Sorry for the delay! Here you go, I'd probably do this... using a standalone yoyo tween and calling play() and pause() on it from the callback. https://codepen.io/cassie-codes/pen/b366615be0fd15f52b61fc22746d793b?editors=0010
    4 points
  31. Try this. gsap.to(".box", { scrollTrigger: { trigger: ".box", start: "top center", end: "top center", toggleActions: "play none reverse none", markers: true, invalidateOnRefresh: true }, ease: "power2.out", x: setWidth, duration:1.5, }) Invalidate on refresh will call any functions again. This just sets the value. x: setWidth() This is a reference to a function that will get called. x: setWidth
    4 points
  32. 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
  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. Hey there, thanks for the feedback! We're currently working on updating our React post with tips to help utilise GSAP and React together, so hopefully that will be a step in the right direction! - Most examples are in vanilla Javascript as this can be extrapolated out into whichever framework the developer is using. GSAP syntax doesn't change between frameworks - it's just differing environments and approaches - e.g refs, waiting for DOM to load etc. So in most cases, I think multiple demos would be unnecessary. That being said - A react section in the docs could be useful. It
    4 points
  35. You may like this thread Specifically .. https://codepen.io/GreenSock/pen/8fcb337385d0f1e401a66f260cf73e76 You might be also able to use some logic from the below example that uses GSAP, Draggable, SVG.js and Spline. https://codepen.io/georgedoescode/pen/ExNpqJP
    4 points
  36. Hey there @michaelsboost GSAP actually has an editPath helper - maybe that'll be helpful to you? https://codepen.io/GreenSock/pen/wvgGxEr In terms of which other tool/library we'd recommend - I'm afraid that's a little out of the scope of these forums. We try to stick to GSAP specific questions here. I actually have a little SVG slack channel - maybe someone in there would have some advice for you? (Obviously anyone else is free to jump in if they have recommendations.)
    4 points
  37. Because it is fun ... https://codepen.io/mikeK/pen/PomGKON Happy tweening ... Mikel
    4 points
  38. Hey @Milan_K, Welcome to the GreenSock Forum. It is better this way? https://codepen.io/mikeK/pen/oNWzawx What do you mean by 'this animation smooth'? Happy tweening ... Mikel
    4 points
  39. Hey @sosilver Those 50% in your .add(buildCircle1(), "line1+=50%") will refer to the duration of the animation you are adding in - so it would be 50% of the buildCircle1's tl's duration past that label. If you wanted it to be 50% of the duration of the line1 animation, you could do something like this. Does that work for you? function line1() { const tl = gsap.timeline(); tl .to('#line1 path', 3, { alpha: 1, scale:1, stagger:{ amount: 3, from: 'end', } }); line1duration = tl.duration() return
    4 points
  40. A timeline’s playhead cant be at the beginning and end at the same time. this video explains something similar to Mikel’s approach
    4 points
  41. Hey @Kire, Another option https://codepen.io/mikeK/pen/KKmdMdX Happy tweening ... Mikel
    4 points
  42. Hi skipper! Don't think about duration as time. Think about it in percentages. gsap.timeline({ scrollTrigger: {} }) .to(foo, { duration: 100 }) .to(bar, { duration: 40 }, 10); Can you tell what's going to happen. The foo animation is going to be played for entire scroll distance. The bar animation is going to start 10% of the way in.
    4 points
  43. @sam_tween_journeyer hey, Here it is with scroll trigger. https://codepen.io/tripti1410/pen/rNmVymx?editors=1010
    4 points
  44. Hey, you could use advanced stagger. gsap.to(".box", { y: 100, stagger: { // wrap advanced options in an object each: 0.1, from: "center", grid: "auto", ease: "power2.inOut", repeat: -1 // Repeats immediately, not waiting for the other staggered animations to finish } }); Happy staggering ... Mikel
    4 points
  45. 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
  46. oh, and go through the demos at: https://greensock.com/st-demos/ The demos may not have the same animation you need, but chances are there is a page structure and JS approach that you can alter to suit your needs.
    4 points
  47. i'll only be truly happy when that gif is used in the docs 😀 saw the update for tween.kill(). I think it will save folks a bit of trouble for sure 👍
    4 points
  48. 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
  49. Hey, This article will help. https://www.motiontricks.com/svg-dashed-line-animation/
    4 points
  50. Hey @Diego Gnoatto, Welcome to the GreenSock Forum. Perhaps text-anchor = "middle" alignment-baseline = "central" is a good solution https://codepen.io/mikeK/pen/rNmBeBq Happy tweening ... Mikel
    4 points
×