Jump to content
GreenSock

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

Leaderboard

  1. akapowl

    akapowl

    Moderators


    • Points

      90

    • Content Count

      278


  2. ZachSaucier

    ZachSaucier

    Administrators


    • Points

      49

    • Content Count

      5,497


  3. GreenSock

    GreenSock

    Administrators


    • Points

      40

    • Content Count

      15,361


  4. mikel

    mikel

    Moderators


    • Points

      21

    • Content Count

      1,519



Popular Content

Showing content with the highest reputation since 10/18/2020 in all areas

  1. Hey @RaoulUnger You are actually making one of the most common ScrollTrigger mistakes. You are targeting all elements with the class of .section. Since you want each of the elements to be triggered at its own given time, you should loop over them, to give them distinct directions. Here's how you could set it up with GSAP's .utils.toArray() https://codepen.io/akapowl/pen/bGegErw Hope this helps. Cheers, Paul
    5 points
  2. Heya! Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte. onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon).
    5 points
  3. You could try setting your autoRotate to something like 25°. autoRotate: 25, You do have some sharp turns in there so it will still be a bit jumpy. That info is still accurate. You'll want to use a mask to animate a dashed path. I have a whole tutorial about the technique on my training blog. https://www.motiontricks.com/svg-dashed-line-animation/ Hopefully that helps. Happy tweening.
    5 points
  4. Hey @Sanprieto - welcome to the forums. There is .time() Is this what you're looking for? https://codepen.io/akapowl/pen/vYKyBrW
    4 points
  5. Sure, go ahead. But don't just copy and paste - understanding the underlying logic is key. Happy forking
    4 points
  6. Hey @Huanyee You can actually achieve this with just one loop for each .title-bg - you just need to fit everything neccessary inside that loop. In this following pen, I reverted the basic setup of the animation back to the initial example. The only thing, that actually needed to be changed on the timeline, was to take the initial .set on the chars out of the timeline, and instead, set it up beforehand, because you don't want it to be part of the animation, but the initial state. https://codepen.io/akapowl/pen/YzWGBJY Hope this
    4 points
  7. Very interesting - this was caused by tiny math issues related to binary systems: start: 2.8 / 5, // (0.5599999999999999) end: 2.8 / 5 + 1, // (1.56) Thus those values were interpreted as slightly more than one iteration around. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/MotionPathPlugin.min.js Here's how I'd probably do it (I'm not a fan of the instant/jarring change in direction): https://codepen.io/GreenSock/pen/5b5b47f9fe28ff287db07274154199dd?editors=0010 Does that help?
    4 points
  8. Hey @_youri You could wrap your funtionality in a function and change your box to the event-target function mouseMove(e) { var xPos = (event.clientX/$(window).width())-0.5, yPos = (event.clientY/$(window).height())-0.5, //box = $('.box'), box = e.target; coord = $('.coordinates') ... and then instead of applying that function to mousemove on the document, you could apply it on mouseenter of the .box and remove it again on mouseleave. $('.box').on('mouseenter', function() { $('.box').on('mousemove', mouseMo
    4 points
  9. Hey @zloycoder - welcome to the forums. My first piece of advice on this would be to not use ScrollMagic, but GSAP's own ScrollTrigger plugin. It is just so much more capable than ScrollMagic in every imaginable scenario. There have been several questions about the effects on that page. I'll link some for you, hoping, that I got correctly, which effects you were referring to. 1) Rolling Text 2) Image Change Hope this helps. Cheers, Paul
    4 points
  10. Hey @Tigranchik That is mainly related to using a fromTo-tween on your $('.expertise:lt(4)') so that third tween-instance in your timeline, that overwrites the values on your first tween when set up. Just changing it to a .to tween already did the trick for me. But also, I'd highly recommend migrating your code to the new syntax. Here is a working example of what things could look like: https://codepen.io/akapowl/pen/PozzQaV Edit: What you could also do (if you wanted to kee
    4 points
  11. Hey @DaemonHK, Welcome to the GreenSock Forum. And here is your welcome present. https://codepen.io/mikeK/pen/rNxwpOm?editors=1010 Happy tweening ... Mikel
    4 points
  12. There are various logic issues in your CodePen and I think a whole different approach would be better/cleaner: https://codepen.io/GreenSock/pen/1044f52f08bee3c40af523ba72dcd2af?editors=0010 Is that more like what you were looking for?
    4 points
  13. Hi and welcome to the GreenSock forums. Why are you using GSAP ticker for something that can be solved quite easily without it? Take a look at this thread and you'll find a bunch of solutions from some of the superstars in these forums: Honestly I would use some of their code with a direct GSAP instance and leave the ticker alone. Finally I would also avoid updating state on every mouse movement because that basically causes a re-render, which of course, in simple components means nothing, but in more complex ones could be a performance issue.
    4 points
  14. It looks like you just accidentally nested the "ease" inside the motionPath:{} object. // BAD: .to(... { motionPath: { ease: "none", ... } }); // GOOD: .to(... { ease: "none", motionPath: { ... } }); Does that help?
    4 points
  15. The reason it "gets crazy" (keeps going fast at the end) is just because that's what the velocity is at the end of the scroll (fast). It doesn't keep updating the velocity after that (onUpdate only gets called when the actual scroll position changes). So it's behaving as expected. I'm not sure what behavior you want exactly, but if you want the rotation to return to its "normal" speed after scrolling, you could do something like this: https://codepen.io/GreenSock/pen/fb6d6dc923b36facb2020f4da7ef63ef?editors=0010 I'm just setting the timeScale based on velocity li
    4 points
  16. It's not because of the rotation. It's because you switched the .to() to a .from() so when you set the progress to 0 (which is the from position) then effectively call another .from() animation the end values and start values are the same. So it looks like nothing is happening. If you're going to use a .from() with this method you should set the progress to 1 instead on resize. Something like this: https://codepen.io/GreenSock/pen/VwjjZZM?editors=0010
    4 points
  17. Or just use the vanilla JS version of changing classes instead But if you want to do something when the animation completes, you should use the onComplete callback. A more full demo of what you're trying to do would allow us to help you more clearly.
    4 points
  18. Hey @callmegoon I think it is only just 'target', but if you want to make use of it with jquery-functions later, you'd have to wrap it accordingly, like so var element = $(target); https://codepen.io/akapowl/pen/RwRaXKK Is this, what you're after? Hope it helps. Cheers, Paul
    4 points
  19. @_youri Alright, now I see the problem. Sorry, I missed it before, because codepen is sort of slow for me today and the loco-scroll wasn't even active when I tested. Seems, you need to set your body's overflow to hidden, for things to work properly. Also, I added scroller: '.scrollContent' to your ScrollTriggers, so they know where the scrolling is being worked on. https://codepen.io/akapowl/pen/oNLBzar Does this resolve your issues?
    3 points
  20. That is related to how you set things up. If you want the animation to be triggered earlier, change the start, maybe to 'top bottom' - when the top of the section hits the bottom of the window. If you want your animations to animate quicker, change the duration on the tweens. Here's an example https://codepen.io/akapowl/pen/rNLjMYd
    3 points
  21. Unfortunately that example doesn't help much in regards to your transition problem, because it doesn't include barba. You'd probably have to use something like codesandbox or a codepen project to make a working example. When you enter a new page, do you initiate everything again? (Sorry if that question might sound stupid, but maybe you don't and that would explain it not working) Also, I don't know if that actually is or can be source ofproblems, but you are using GSAP v3.3.4 with ScrolTrigger's latest beta. scrollerProxy was only introduced in GSAP 3.4.
    3 points
  22. Asking questions to get a better understanding is never wrong, so there's absolutely no pointing fingers here. There's just always some major things to consider when animating - when making animations dependent on special events, even more so. And that common mistakes page is simply just a super nifty way, to get your head around what might be wrong when something's off, super quick. Glad it worked for you. Happy scrolling and looping
    3 points
  23. As often happens, posting my support request has caused me to think about my problem a little deeper and I think I've found a solution. For anyone else who reads this: In the from() documentation there is a parameter called immediateRender. If I set that to false, my page transition works fine. Thanks, B
    3 points
  24. Hey @miraclemaker How exactly you could do that for your very special own needs, probably depends on how things are set up for you. What you could do, is use the callBacks to adjust a timeline's timeScale for example const tl = gsap.timeline({ scrollTrigger: { trigger: title, start: "top center", end: '+=150px', toggleActions: "play none none reverse", onEnter: () => { tl.timeScale(1.0); console.log('enter') }, onEnterBack: () => { tl.timeScale(5.0); console.log('enter back')
    3 points
  25. Hey @neo420 It's always kind of hard to give any good advice without an example - especially with the combination of barba and other libraries. My guess is, that you will probably have to kill/destroy both, your ScrollTriggers AND locomotive-scroll when leaving a page, and reinitialize both after your transition. So first off, locomotive-scroll gets knwoledge of the new environment it is supposed to be working in, and then your ScrollTriggers get that same information and can also adjust to locomotive-scroll. A good way to kill all your ScrollTriggers is thi
    3 points
  26. It's doing what GSAP does ... tweening a numerical value (which it found in the filename) over a duration. While that's not your intention, it is actually what GSAP does. So, my question is, what effect are you trying to achieve over those 5 seconds? Are you looking to fade one image into another?
    3 points
  27. Just noting that this refers to the tween in an onUpdate if you don't use an arrow function so you don't need a variable reference to the tween: onUpdate: function() { console.log(this.time()); }
    3 points
  28. Without knowing what you're doing, I feel compelled to say it's not a bug of any kind. Post your relevant code to CodePen and we can give you a better answer. My guess, since what you're looking at in terms of filenames are ascending values, is you're tying the image call to the tween's progress, which goes from 0 to 1.
    3 points
  29. I'd just use a single ScrollTrigger to do this. No invalidate needed: https://codepen.io/GreenSock/pen/xxOEorp?editors=0010
    3 points
  30. I took some time, and fiddeled around with the code of your website example there, to see if I could find something, and I did. You are referencing trigger: "section.about__container", when you don't have a section with that class in your HTML. Instead you have a div with that class inside one section, so it should be this instead: trigger: "section .about__container", That is, what throws things off in the first place. If you change that, you'll see, the pinning will work, and you can start working on your animation to your liking fro
    3 points
  31. Hey @GeS I think the animation on your page only shows the way it does initially because something else seems to be off somewhere. You'll notice, that you have a pin applied to the ScrollTrigger for your 'section.about__container' but nothing ever gets pinned. Thus, I think, something must be wrong in your code somewhere else initially. When you inspect that image of yours in dev-tools after resize, you'll notice, it is not being cropped, as you said, but it is being translated up on the y-axis instead. And that is actually, what it's supposed to do (s
    3 points
  32. Hey @kevywalton, Just for fun: https://codepen.io/mikeK/pen/da9f32c7123f038e34be8d1195210462 Happy pulsing ... Mikel
    3 points
  33. Nice solution @ZachSaucier Just as a sidenote: For me, your solution did not apply the mouse-events properly. I had to change this $svg.on('mouseenter, mouseleave', () => tl.reversed() ? tl.play() : tl.reverse()); to that $svg.on('mouseenter', () => tl.reversed() ? tl.play() : tl.reverse()); $svg.on('mouseleave', () => tl.reversed() ? tl.play() : tl.reverse()); https://codepen.io/akapowl/pen/NWrRdwx
    3 points
  34. Hey Yannis. With this level of control it's probably best to set up a "real" tween (not stagger) for each letter using a loop and set up the start and end of the motion paths based on what you want the offset to be. Something like this: https://codepen.io/GreenSock/pen/VwjKPWV?editors=0010 (It seems that MotionPathPlugin doesn't like numbers with a lot of repeating numbers, hence why I had to add the rounding to 2 decimal places. @GreenSock not sure if we want to change that or not)
    3 points
  35. Hey @jonsaul You could (for each image-item) create a ScrollTrigger, that has a start dependent on the height and offset from top of your headline. Maybe something like this https://codepen.io/akapowl/pen/YzWGGMN
    3 points
  36. Hey @Yannis Yannakopoulos You could set your timeline to reversed initially and on mouse-events, you could check for the reversed state, and depending on that, tell the timeline what to do, like so tl.reversed() ? tl.play() : tl.reverse(); Does that come close to what you thought of? https://codepen.io/akapowl/pen/PozGzmM
    3 points
  37. @zloycoder It sure is. Just remove everything related to smooth-scrollbar (the upper portion in JS and the .scroller div in HTML and its respective CSS) and you'll see, that it works the same way without smooth-scrollbar. If you wanted to replace it with a different smooth-scrolling solution you'd have to set up the scrollerProxy of ScrollTrigger accordingly and make sure the HTML markup and CSS fit the needs of whatever solution you want to use.
    3 points
  38. Hey chevohin. You just need to use the align property. You probably also want to change the alignOrigin to [0.5, 0.5] (the center). Side notes: .restart() is equivalent to .play(0). ease: "Power3.easeOut" is invalid. Just use ease: "power3". Here's how I'd set it up: https://codepen.io/GreenSock/pen/vYKKQwE?editors=0010
    3 points
  39. Hey @GeS, If you want to animate the sea, you need 'space' // css .img__sea { position: absolute; height:200%; top:-100%; } // js var tl = gsap.timeline({ scrollTrigger: { trigger: "section.about__container", scroller: "#viewport", scrub: 0.05, pin: true, start: () => "top 20%", end: () => "+=250%", }, }); tl.to(".img__sea", { yPercent: 50, ease:Power0.easeNone, }); https://codepen.io/mikeK/pen/oNLLMWQ?editors=0110 Happy sailing ... Mikel
    3 points
  40. You might want to consider this approach (related thread):
    3 points
  41. ... or this could be an option https://codepen.io/mikeK/pen/PozzmaV Happy flying ... Mikel
    3 points
  42. Please try adding this to the top of your JS. gsap.defaults({ autoRound: false });
    3 points
  43. This should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js. Thanks for pointing it out.
    2 points
  44. Hey @hurricanenara Besides the recommendation of migrating to a more recent version of GSAP and switching to ScrollTrigger because you will get way better support for it on here, there is a couple of things, you should consider. In your example, you load TweenMax, TimelineMax, TweenLite and TimelineLite in your HTML. Additionaly in the js-section you load all recent GSAP files via that codepen option. Then in your code, you switch betwenn TweenMax and TimelineLite and Tweenlite and TimelineMax. You should only load the very neccessary files
    2 points
  45. That is, because it listens to the mouseposition in relation to the window and animates the image according to that. Thus, depending on where your image is positioned inside the window when hovering it, you will only see it move in a certain direction. You can check that with the picture of the plane on your demo-page when scrolling, for example. If it is in the upper portion of the window, you will see it behave differently, than when it is in the lower portion of the window.
    2 points
  46. Hey @rocketclowns, Welcome to the GreenSock Forum. Nice animation. Maybe it is better to create a smooth path with a mix of Q (= quadratic Bézier curve) and C (= curveto). https://codepen.io/mikeK/pen/6bd8b3dbb3420a77ef8816e37eb5516b?editors=1010 Happy tweening ... Mikel
    2 points
  47. Hey Timmons and welcome to the GreenSock forums. You just need to .revert() the split after the animation has completed. If you are having trouble implementing it then please make a minimal demo of the situation using something like CodePen and we'll do our best to help:
    2 points
  48. Hey @Jasmine Sorry, but that is a bit over my head. I am not particularly familiar with shaders and only know the mere basics of three.js with regards to WebGL. This is nothing related to GSAP in particular, so it is probably a bit out of scope for this forum.
    2 points
  49. Hey @nayan12345 - welcome to the forums. That page you linked to uses locomotive-scroll for the smooth-scrolling you see. That is nothing immediately related to GSAP. If you wanted, you could achieve a smooth-scrolling effect with GSAP and the helpf of ScrollTrigger, though, for example. Maybe these threads have some helpful information for you. Hope this helps. Cheers, Paul
    2 points
  50. Do you mean the zipped file from your dashboard? Or did you mean the CDN? <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
    2 points
×