Jump to content
Search Community

mvaneijgen last won the day on June 7

mvaneijgen had the most liked content!

mvaneijgen

Moderators
  • Posts

    2,733
  • Joined

  • Last visited

  • Days Won

    241

mvaneijgen last won the day on June 7

mvaneijgen had the most liked content!

About mvaneijgen

  • Birthday 07/23/1989

Contact Methods

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I suck at math. There is probably something logical to get the correct distance. I would for sure use the ScrollTrigger.end values, but on my screen when I do the math that seems logical it needs 82px extra to finish the animation and I cant seem to figure it out where that comes from. https://codepen.io/mvaneijgen/pen/yLWobXZ?editors=0010 That said it seems all highly subjective. I don't know what you're building, but will there never be anything before it or anything after it? Because this will highly impact what kind of math you'll need to do. Also the start value (which is now the top of the browser) will highly influence how you'll need to do the calculations.
  2. Hi @vargwin welcome to the forum! There is almost no room to scroll on the page . If I remove all JS code you can see, you just ave a few hundred pixels to play with on scroll. https://codepen.io/mvaneijgen/pen/RwmZKRJ?editors=1010 If you then enable ScrollTrigger and I've set ID's to each, so you can see what is happening better. ScrollTrigger starts when the green markers touch each other and stop when the red markers touch each other. On my screen the first ScrollTrigger cant event finish scrolling. Simply there is not enough space on the page to finish your animation. https://codepen.io/mvaneijgen/pen/zYQdNKN?editors=1010 If I add the height of two of your sections + some extra space all animations will finish. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/vYwJgXr?editors=1000
  3. Everything in GSAP starts with an animation, so you first have to build the animation before you think about doing anything with scrolling. To define it simpler nothing is really scrolling, elements are moving on the y-axis, which when you hook it up to ScrollTrigger creates the illusion of things scrolling. Check out my post on creating a stacking card effect, this is all the logic you'll need. Hope it helps and happy tweening!
  4. Seems like you indeed don't need to set horizontal: true, it will infer it automatically. It was my go to seeing things were not working, but it was the old version you were loading! https://codepen.io/mvaneijgen/pen/xxNLxdX?editors=0010
  5. GSAP is highly optimised and will calculate all the values on page load and then uses those values it got when it is ready to animate. If you just give it a value it is going to hold on to that value no matter what. There is however a function build in when you use function based values https://gsap.com/docs/v3/GSAP/Tween/#function-based-values that when ScrollTrigger.refesh() is called (which gets called when you for instance resize the browser) it will calculate the new values. In your case I would thus rewrite all values you want to get recalculated when the browser resizes. eg x: "70vw" becomes x: () => window.innerWdith * 0.7 Your demo is completely broken, there are several plugin that get used (or at least registered), but don't get loaded you also load a really old version of ScrollTrigger. We have a pen which loads all the latest version of all the plugins, which I find much easier to just fork instead of starting from scratch. https://codepen.io/GreenSock/pen/aYYOdN I also working in Wordpress, but all my animation start out on Codepen, so I can just focus on creating the animations I want and I don't have to worry about my platform throwing errors and can just focus on the animation I want. Then when it comes time to implement it in the site this will be a breeze, because I have a known working version and I just have to replace some HTML with PHP. It also allows you to experiment a lot more, because you can easily fork your work and when something is not working as expected you have an easy version you can share on places like this. Hope it helps and happy tweening!
  6. Hi @Ian123 welcome to the forum! The frist step in debugging anything should be updating to the latest version, you were loading version 3.6.1 and we are currently at versions 3.12.5! A lot has changed in the mean time. When you want thing to work horizontally, you'll have to set horizontal: true on your ScrollTrigger, check the docs for all the ScrollTrigger properties https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1 You don't have enough space for the animation to finish, so I've moved the element over and changed the ScrollTrigger end trigger. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/zYQdOXB?editors=0010
  7. GSAP is highly optimised and will 'bake' all the animations/values on first load, so that it only has to focus on animating the elements. So on page load it gets a new random value and then used that value when ever, but the utils random function has an option to create a function of it and if you use this in the onComplete callback to set a new repeatDelay value it will work as you expect https://gsap.com/docs/v3/GSAP/UtilityMethods/random()/ I've written it out really verbose, so that you can see the value updating in the console, but you can just feed in the random function directly. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNBEeKL?editors=0011
  8. First of, I would let GSAP handle all animations and not toggle classes. Next I would never use transition: all; in your CSS change all for the specific properties you want to target and you should never transition something that you're animating with GSAP: There are some properties you're better off not animating, and width is one of them, this causes a browser repaint which is almost never good for perforce, instead use the transform properties and animate scaleX instead of width. Lastly you've got a scroll trigger that has scrub: 1.5, which results in animation always lagging behind 1.5 seconds, so if you don't want this lag set it to true. I'm not completely sure what it is your animation is doing. I can see some bars, but nothing is happening with those transparent bars. If each section is depending on the previous section, why not build one timeline animation with one ScrollTrigger instead of a forEach and creating multiple ScrollTriggers. Hope it helps and happy tweening!
  9. You could also use tweenTo and directly control the same timeline instead of creating new tweens, but this still has the issue that a timeline cant tween past the start of a timeline. 0 is the start and there is nothing before that. If you want full control over this animation in both directions, you'll have to create two separate tweens. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/mdYwYVm?editors=0010
  10. Yes, the Observer plugin can watch for certain events and then do logic based on that. ScrollTrigger is build to hook animations to the users scrollbar. They both can do something based on the scroll of the user, but they go about it in completely different ways. As always the docs are your best friend and will tell you everything, even thins you didn't know you needed! https://gsap.com/docs/v3/Plugins/Observer/ https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1,
  11. Hi @petlyra welcome to the forum! You could have the different symbols already on the scale and then just show or hide them (of course with an animation) when you need them) . You could reparent the symbols you're are already using, but is seems simpler, to have totally different sets (you could then create a different graphic, for having 1 apple or 3 apples on the scale. If you want to use the same graphic, you could look in to the Flip plugin, this would then figure all the repositioning out for you. Especially Flip.fit() check it out https://gsap.com/docs/v3/Plugins/Flip/static.fit() Yeah there is no collision detection in GSAP, so you'll have to write your own logic for that, but you already have to seem that down. Hope it helps and happy tweening!
  12. Hi @akapowl welcome to the forum! Can you please create a more minimalist demo. There are a lot of empty new lines, could really help if you could clean those up 😂
  13. Here it doesn't look ok on Safari (Version 17.2.1) and I think this is because of the nesting of elements. I would not nest elements, but have them on the same level and transform a parent element, eg something like this https://codepen.io/mvaneijgen/pen/ZENyoNw?editors=0100
  14. There is probably something in your CSS conflicting with the perspective. I would bring it back to the basics and see what is causing the issue. Setting perspective on the element and animating its rotation works perfectly in GSAP, so the issue you're having has nothing to do with GSAP. https://codepen.io/mvaneijgen/pen/abrwEmP
×
×
  • Create New...