Trynix

Hi everyone, I'm using this countdown animation (https://codepen.io/doriancami/pen/jEJvaV) on my site. Generally it seem to work fine, but for some devices (for instance iphone 12 pro max, version 15.6) it causes whole page to flicker. Any idea what's causing that, and what would be the remedy? Thanks!

Hi everyone! I'm progressing a value across sections using scroll triggers (first section value range is 1 to 2, second section value range is 2 to 3, etc) as it will tie up with another webgl animation. I have two questions I would greatly appreciate thoughts on: - What would be a best practice for this approach? I have attached a codepen example to show my current approach. - Is there a way to manage the distribution of the scrolltrigger progress? For example, for the first section, I'd like the scrolltrigger progress value to go from 1 to 1.5 in 33% of the scroll, then stays at 1.5 for 33% of the scroll, and then go from 1.5 to 2 in the last 33% of the scroll (so basically speeds up between 1 to 1.5 and between 1.5 to 2, but spends more time on 1.5 exactly). Will I need to create multiple scrolltriggers with different start/end values per section to have this effect, or is there a smarter approach? Thank you very much

Thank you!! I'll definitely do that for now. But just to ensure my understanding and concepts are accurate, isn't invalidate() supposed to wipe all variables the timeline has read clean, so that it reads them again?

Hi everyone!! In the attached codepen, I declare a variable before timeline animation (which starts paused anyway), and then I update the value of the variable and call the timeline with .invalidate().restart() (which in the actual implementation will trigger via a button click) hoping that the animation will run with the new value in mind, but it doesn't. Am I misunderstanding the purpose of invalidate()? How do I get the timeline to read the updated value?

Thank you!!

Hi everyone! I'm trying to have an animation such that yellow card unblurs and goes to the front, then blurs again just as orange card unblurs and steps to the front, and then the orange card blurs just as the green card unblurs and steps to the front. I tried fromto but I don't think I'm doing it right. I considered manually adding each step in a timeline, but was wondering if there's a better approach to this. Also since this'll be a repeating animation, I'd want each element to take the same time, but my example at this point seem to have a jump after the last element. Thanks for any feedback

Understood, thank you gents for your feedback!!

Thanks for your feedback!! I actually prefer the way it speeds and slows in the original as opposed to having no easing, just not having it reach a halt in the center.

Hi everyone, I'm trying to get this ball to move along the 2 paths, without getting to a stop where the 2 paths meet (in the center). I've tried reducing that "stop" by starting the 2nd path movement a bit earlier, but since this is a repeat timeline I'm not sure what to do about the first path animation in order to reduce or eliminate it's stop in the center. Not sure what's the best approach for this. Thanks!

Thank you!! All is working well now

Hi everyone, In the attached codepen, the drawing starts at one point and ends at the other point in two paths. I'd like to know if I can have the drawing done in two paths still, but instead of them starting at the same point I'd like one drawing to happen in reverse and the other as is (so that drawing starts at simultaneous ends). Tried playing with different values but couldn't really wrap my head around it thanks! https://codepen.io/mazayadigital/pen/KKymaJN

Thank you very much for your feedback! So I went ahead and changed CSS settings for the different elements I plan to animate, but then I realised that I can't animate with gsap.from() anymore since I need to specify that i want gsap.to opacity:1 (instead of gsap.from opacity:0, since opacity will remain 0). Does this mean I have to do a gsap.set opacity:1 for all elements that have CSS setting of opacity 0, just before timeline creation (if my plan is to continue using gsap.from), or is there another approach?

Hi everyone, I just started learning GSAP few days ago, and I'm really loving what it has to offer, but keep coming across small challenges so please bear with me I tried creating a simple codepen example attached (doesn't capture full complexity, but hopefully does the job). https://codepen.io/mazayadigital/pen/OJOpQMv Basically I'll be running an animation somewhere, and only after that animation runs, another animation is setup with scrolltrigger intact. Idea is that if a person scrolls too fast then the 2nd animation (and associated scroll trigger) will not play until first animation is done. I use onComplete and a function to create the 2nd animation. Issue I have is that the 2nd animation includes animating from autoAlpha 0, and because the animation only sets up after onComplete of the first one, then the elements of that 2nd animation are visible at the start until the onComplete function triggers and the 2nd animation is setup. I also tried setting elements of the 2nd animation to visibility hidden in CSS, but because i use splittext on the 2nd animation, the parent element stays hidden and the whole thing messes up. Would appreciate thoughts on ideal approach to handle this, and if the approach is correct then how do I deal with the elements being visible before animation is setup please. I also have few followup questions (independent of each other) that I'd greatly appreciate input on (if creating separate topic for each question is preferred, please let me know, I just didn't want to spam the forum when they are small questions): - In general, is there a reason to use opacity over autoAlpha at any point, or should I just default to using autoAlpha? - On a different instance I have a grid of 2 columns. On desktop, the two columns are side by side and will follow a single timeline based on scrolltrigger, on mobile (since the grid will become 1 column of two rows due to narrower screen) the timeline will be split and the scroll triggers will be different for each row. Is it best to create completely separate timelines for mobile and desktop and bind them with matchmedia, or is there a way to somehow combine the timelines on desktop (with slight variation) and separate them on mobile? - I have image containers and each container has a number of images. By default, There's an animation common across all containers (i.e. animate each child image from y:20), and then there are slight variations depending on the content (some images will jitter in place, etc). Is it best to create separate timeline for each container so that all desired animations are handled correctly, or can I somehow mix and match different pre-made animations depending on defined attributes of the container? Looking forward to any thoughts, and thank you very much!!

It does, thank you very much I've made the update and it works flawlessly now!! I'm trying a different approach highlighted in the attached example. https://codepen.io/mazayadigital/pen/OJObqxN Basically I want to animate the target element every time it passes "action-div", and reverse that animation every time it goes back across it. I've put the animation as increase in width by 20% as an example but it'll be more sophisticated. I've added ".action-div" as the scrolltrigger target but it seems to only target the first element it comes across. Is there a way to have it target all ".action-div" instances for the trigger action? Thanks!

Thanks for your feedback, I tried to replicate the necessary elements of my page to the attached codepen, and indeed the issue re-occurs when browsing view mobile and with debug view active. From what I see, it seems that the start location updates to the current start-div position at different points, and because the start-div element is sticky, it ends up updating to way below where the original start position was. I'm not sure what's the cause of these random updates, but I guess a way around it is to attach the start position on a static element instead of a sticky one. https://codepen.io/mazayadigital/pen/WNXoKxo