Jump to content
GreenSock

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

Leaderboard


Popular Content

Showing content with the highest reputation on 09/24/2020 in all areas

  1. Hi @kylerumble, What you're looking for here is a pretty straight forward ... ease: bounce; https://codepen.io/sgorneau/pen/ZEWwjpw
    4 points
  2. Hey @Daniel Hult You are making one of the most common ScrollTrigger mistakes here: Nesting ScrollTriggers inside multiple timeline tweens A very common mistake is applying ScrollTrigger to a bunch of tweens inside a timeline. This doesn’t make much sense because both the timeline and the ScrollTrigger would try to control the tweens' playhead. It's best to apply a ScrollTrigger to either a standalone tween or to a parent timeline. You could do what you tried above by just having 1 ScrollTrigger and adjusting the duratio
    4 points
  3. If you're not looking for squash and stretch, but just a simple infinite bounce, that's where you'd want to use a circ ease. https://codepen.io/PointC/pen/822a4b48b9ddc37fd1ec3fc5172a5c65 Happy tweening.
    3 points
  4. Hey Kyle and welcome to the GreenSock forums. GSAP has a CustomBounce plugin that makes this sort of thing a breeze, including the squashing and stretching! I highly recommend it. If I were you I would only apply it to the icon, not the whole list element. Moving the whole list item is a bit disorienting to me.
    3 points
  5. Hey phernand42. In general it's good to forget about ScrollTrigger (at least conceptually) until things are animating the way you want to then add ScrollTrigger. So how would you do this without ScrollTrigger (i.e. logically)? You'd want to show one layer and hide the previous one each time a section is reached. To do that sort of thing in GSAP it probably makes sense to create a timeline for each section that fades in the new content and fades out the last content (if necessary). As for your code, you're making one of the most common ScrollTrigger mistakes:
    3 points
  6. Well, you could also stick to your original start and end for the ScrollTriggers and just translate your card__inner up on the y-axis half the amount of its height, so in your case '-35vh'. I don't know if that is a perfect solution, but in your case it gives the desired result. https://codepen.io/akapowl/pen/RwavEay
    2 points
  7. Solved. There was another animation in the main App.js. I'd taken out "import gsap..." from here which caused it to freak out.
    2 points
  8. Hey Patrick and welcome to the GreenSock forums. The issue here is that you create an animation the first time the function runs but you don't have access to it later the subsequent times that the function runs. What you should do instead is create the animation beforehand and use control methods inside of the event listener function. This is one of many tips that I recommend in my article on animating efficiently and also mentioned in the most common GSAP mistakes article. I highly recommend both You could actually do what you're trying to do in two lines: http
    2 points
  9. Hey @arjen - welcome to the forums. I think, it does, what you tell it to. It pins your item to when its top meets the center of the window. If you change the start to start: "50% 50%", you would pin it to when its center meets the center of the window, which is probably what you aim at. You would just have to adjust the right side of your setup accordingly if you also want it to be centered on snap. https://codepen.io/akapowl/pen/KKzJXVm Edit: My pen above creates gaps between the individual Sc
    2 points
  10. Hey Saad and welcome to the GreenSock forums. I explained how to do this sort of thing in this thread. Give it a read, look at the code, and see if you can get it working for your project. If you have a specific question we'll do our best to help.
    2 points
  11. Not sure what you mean. Need to see a demo. Hide it when it leaves the window, or when it's a certain distance away from an edge. What is a mobile device? Most Windows laptops and Chromebooks have touch and mouse inputs. I wouldn't show the ball until there is a mouse event. https://codepen.io/osublake/pen/3170174f4ce844f78c7789a279f8e50e
    2 points
  12. Hey Dev Patel and welcome to the GreenSock forums. How about this? https://codepen.io/GreenSock/pen/YzyqVNe It's one of the many effects listed in the demos section of the ScrollTrigger documentation.
    1 point
  13. Short answer: check out the new version of Flip that now lets you set "nested: true": https://codepen.io/GreenSock/pen/5e185bb47052e42b61f93687e29c00bf?editors=0010 Explanation: The challenge in what you were doing was that you had nested elements that were flipping, so when it looks at the end state and figures out where the elements are compared to where they were before the change (let's say container1 is 200px lower and child1 is also 200px lower), and it animates them accordingly. But of course if child1 is in container1, that means that for every pixel we move conta
    1 point
  14. Wow! Thanks so much for all the help to all of you. I'll implement those changes. @ZachSaucier I agree, I'll move the animations to the SVG, I believe I originally did that because i was having trouble sequencing the pins. GSAP is absolutely amazing, but there is so much to learn and grasp. So it's been a lot of trial and error. Kyle
    1 point
  15. Just use the onUpdate function along with a calculation. Here's a basic demo: https://codepen.io/GreenSock/pen/wvGNxKP?editors=0010
    1 point
  16. Hey Sumit and welcome to the GreenSock forums. It's not exactly clear what the issue is given you didn't provide a complete demo. My guess is that you're trying to use an old version of the ScrollToPlugin with the new GSAP 3 core. That won't work. If you're going to use the GSAP 3 core then you also need to use the GSAP 3 version of the plugins. Try this: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script> If that doesn't f
    1 point
  17. Thanks Zach I'll crack on. And post if I find a solution. Cheers
    1 point
  18. Glad you got something figured out. A couple of notes about your code: In general you should try to use refs in React, not selector strings like what you have. More on that here. No need for the value being a string here: y: "50px". Just use y: 50 as covered in the most common GSAP mistakes article. You might as well use let instead of var.
    1 point
  19. All that does on resize is 1) kill off the previous animation and 2) recreate it. The animation itself uses responsive units that are dependent on the new screen size to it works with different sizes. That's quite an abstract question. I can show you lots of ways to use 4 variables in a timeline but that won't be very helpful. Why don't you try putting the lines inside of the widgets like I said before? Then rewrite the code inside of the setupLines function to work with the new position of the lines. Then try resizing it and see how it goes wrong (if it goes wrong).
    1 point
  20. Hey GeS. @Ihatetomatoes made some useful articles about GSAP + Barba that you should check out. The core issue here is that you are not recreating/updating the relevant ScrollTrigger and smooth scroll stuff when the new page loads. Unfortunately we don't have the capacity to fix all of the issues for you though. Some pointers related to your tweens though: tl.to(".blue", { // ... left: "-100%", ease: "Expo.easeInOut", }); It's best to use translations instead of left/right/etc. So x: "-100%". But if you have that, it's better to use xPercent. "Expo.easeInOu
    1 point
  21. Hey Catalin. What's the end goal? You mention resize and something about scrolling but I'm not understanding what you're trying to accomplish. Can you please try to clearly state what you're trying to do and what's going wrong?
    1 point
  22. Drop the new, you don't need it. Given the lack of details that we have it's impossible for us to answer that question. I don't understand this comment. Are you saying that you .add() one timeline into the other? Again, it would make it much easier for us to help if you made a minimal demo:
    1 point
  23. Similarly to Richard I've never heard of Grav. But GSAP is just JavaScript so you include it like you could any other file in Grav. GSAP, like all JS, runs in the context of the whole page but that doesn't mean that if you include custom GSAP code in one partial that will necessarily affect other partials. It comes down to how your write your code, especially your selectors. If you write something like gsap.to('div', {}); then ya, it will probably affect elements outside of that partial. But if you scope the selector like gsap.to('.myPartial .someElem', {}); then it won't affec
    1 point
  24. Hey ferriss and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member! Lottie is definitely not the most performant way of animating things in general. Usually you can get better performance by animating by hand. But without seeing the actual animations themselves it's hard for us to give other advice. Try to limit the amount of animations happening at any give time and try to only animate properties that are performant to animate. Several things to change here: We highly recommend the GSAP 3 syntax. It's sleeke
    1 point
  25. hi daniel, i just had a play with a copy of your codepen and it seems to be a lot better if you use hex values for your colors instead of names. I had a similar issue recently changing the background colors and that was the advice that I was given and worked for me.
    1 point
  26. Hello Joshua and welcome to the greensock forum. i don’t know GRAV CMS but is does look rather interesting so thanks for drawing attention to,it. given that you are new to both then I would recommend checking out the GSAP documentation and learning centre as well as the grav documentation which seems to be very comprehensive. as you say greensock treats a URL as a single page Whereas grav appears to let you Define css and js at a modular level. the obvious issue is to keep your files and variables with unique names so that they don’t clash with each other as you
    1 point
  27. If minimal code is what you're looking for, here's one other option: let shouldPause = true; let tl = gsap.timeline().to("h1", {x:300}) .add(() => shouldPause && tl.pause()) .to("h1", {y:300}); Just beware that when you do this kind of dynamic pausing, the pause may be slightly off time-wise because of the nature of updates. For example, if you place that function call at exactly 1 second into a timeline, remember that the timeline's playhead gets updated roughly once every 16.67ms and if the user's device gets bogged down it may be longer, so perhaps it updates at 998m
    1 point
  28. Thanks for all your inspiring work guys! Here are a few of our banners: https://consequence.de/display-ad-abstimmung/final/smart-audio-300x600/ https://consequence.de/display-ad-abstimmung/final/technics-sl-1210-800x250/ https://consequence.de/display-ad-abstimmung/final/Trimmer_2019_Barber_800x250/ https://consequence.de/display-ad-abstimmung/final/mwo-umzug-800x250/ https://consequence.de/display-ad-abstimmung/final/tws-technics-men-950x250/ https://consequence.de/display-ad-abstimmung/final/lumix-profi-800x250/ Cheers!
    1 point
  29. Here are a few sets from a Campaign i worked on. (Under 80kb publisher spec). Blowing bubblegum effect. https://storage.googleapis.com/digital.bradleylancaster.com/BRISBANE_CITY_COUNCIL/BCC717/display/seniors/dev_preview/index.html Parallax foam effect. https://storage.googleapis.com/digital.bradleylancaster.com/BRISBANE_CITY_COUNCIL/BCC717/display/first_home_owners/dev_preview/index.html Profiterole Roll https://storage.googleapis.com/digital.bradleylancaster.com/BRISBANE_CITY_COUNCIL/BCC717/display/Priority_Campaign/dev_preview/index.
    1 point
  30. If anybody is interested in learning shaders, here's a good place to start. https://thebookofshaders.com/ Some of the functions available. http://www.shaderific.com/glsl-functions/ And a "simpler" demo to play around with.
    1 point
  31. Here's an SVG version just to give you some options. Happy tweening.
    1 point
×