Lichay

Gsap is free for company use? I am front end progremming and want to use Gsap library until now I use for personal use but currently I want to use in my crompany that I develiping, I can use it ? on free ? Thanks you!!

it wrong way use root style when I need same style on one component only

Hey I have a small question I use that but I am using CSS global variable :host but after I use your solution I need to change to :root and it wrong way to change it inside component. Do you have another solution? Thanks anyway for first way

Thanks it really work. The property duration do the job, I think at first have another property something like priority. Thanks @mikel

Done

Hi guys. I have a little issue with priority, I want timeline start every point in another position and don't same priority. for example const headerDiv: string = 'header+div>h3'; const headerDivDesktop = gsap.timeline({ scrollTrigger: { trigger: headerDiv, start: 'top 60%', end: 'top 30%', scrub: true, markers: true } }); headerDivDesktop.to(headerDiv, {scale: 1.25 }); // X headerDivDesktop.to(headerDiv,{x:50}); // Y headerDivDesktop.to(headerDiv,{y:50}); // Z X , Y and Z start from 60% and end from 30% on this space three of animation happened (X Y Z) I want for example X start in 60% to 40% and Y and Z start only 5% each. for now it take 1\3 of amount => mean - X 60% , Y 50% , Z 40% Thanks for helping guys

I will do two video one from my example and second from your parallax effect with pin Ill record tomorrow

This is code that created by you and I saw all container go small and to side it happened something you need to paly with that. have more example very basic one you can see yourself gsap it clean and have bug too it keep scrolling down (Must use iPhone) on chrome in computer it work perfectlly

I create this for report bugs when I am use pin for any reason every website stack and do some problems 1) stack to go up 2) show images under footer (lower container) most important it happened every codes just need to pin element and it happened If you want to see that yourself you must take one code and iPhone to display I try it with my iPhone (iPhone 12 pro max) and new version ios moreover I try it with sis iPhone (11) and same problem how I recognize that bug ? I developing website and it do that problem and when I use my mom phone (galaxy 8+ it work well) You must try it yourself to see that and fix it fast as possible. @ZachSaucier @GreenSock thank for support more info-- You can use that website that create by you and see that bug. https://codepen.io/GreenSock/pen/KKpLdWW I can add video record from my iPhone in need.

First of all thanks and second I don't see reason to use both phase 1 onRefreshInit: self => self.savedProgress = self.animation.invalidate().totalProgress(), onRefresh: self => self.animation.totalProgress(self.savedProgress) and phase 2 this.scrollTrigger && this.scrollTrigger.kill(); this.kill(); because it work with only one phase and moreover in side phase 2 if I use this.scrollTrigger && this.scrollTrigger.kill(); or this.kill(); it work no need both of them or have reason for performance? (phase 2)

yes it really work but i hard to understand what happened there. in first load it add push (actions.push(action)) but after he get refresh he do get refreshInit by lisener and update the element to current values . That what I understand but it still kepping push every resize and array get be bigger and bigger and slow the website. it hard to understand how it work from inside because if array have 24 length how it possible to read the right css for same element? edit: I actually improve your cod performance to this const imageActions = []; ScrollTrigger.saveStyles(images); ScrollTrigger.addEventListener("refreshInit", () => imageActions.forEach(elementAnimation => elementAnimation.invalidate())); imageActions[index] = action; but I don't understand how it work in your example that length more then 6 how it ready well the style from array that have more then 1 (in your codpen example - .box ) elements inside edit 2: i keep explore it and learn every gsap element refresh very time when resize screen maybe random time or something else for example: gsap.to('.box', { top: 100, y: 5, x: 30, duration: 3, ease: 'power4.out', onComplete: function () { console.log('run'); } } it will print on console when resize screen every some time

after animation finish (go and back) it should let you click on that in my example https://codepen.io/lichaytiram/pen/QWGWPoj change the screen to small size (purple color) let the animation finish after that click on box (green) now you should resize screen size to big and click again on box - you can see the jump the green box go down instead do click animation on top. if you wait on big screen size and click after that you see the box stay on top and he doesn't go down. That my problem inline css stay on box after click event (in complex situation)

but click event isn't include it should be click after animation stop play

Hey, I see reason to add it when I use onComplete function it kill the progress and work well with media query it work well but restart the animation on change screen sizing. so in my situation I prefer use onComplete function and don't restart the animation on change screen size edit: in complex animation it do some issue https://codepen.io/lichaytiram/pen/QWGWPoj and again broken inline style

I think first to set savestyle like on doc, but I think that have better way with onComplete function. it work perfectly but i have small question on your example you create two media query that do same thinks have a reason for that? edit: I add comment

If you resize your screen size to purple you see the animation and after you change to screen size to bigger the box stay down instead go on top How can I fix it? need use Gsap library savestyle?

yes very nice solutions. The first solution do some problem fromTo => from for your example only have scale:0 and my example have more then one value so need convert some (number)deg css value to 'skew:number value' so it can be a difficulty to get full match but it really nice solution for another problem. and your second solution perfectly match to my example anyway I am glad for both solution and Thanks you :-)

it hard to find the bug I work on that last week and give up. anyway see this https://codesandbox.io/s/compassionate-morning-ofq3w?file=/src/app/app.component.ts after click it isn't yoyo well, sometimes it just stay without yoyo. (click on some bottoms + on same bottom and see my issue)

on my post with pining + data speed

in last time really was bugs. anyway in that post i post code and more with codepen and I read doc and nothing help me 3 links from ZachSaucier don't help me for this situation but it work by elegantseagulls comment do the job well anyway Thanks for help.

Thanks it really work

It not working i saw the doc before I update the link to see all options and nothing work if you know how to achieve it with some diff ways it be perfect i want to know about them because i try everything and it don't work Thanks.

it really hard to find something work on internet while all it Gsap 2.0 I am try to add some delay after animation finish and after some sec it will reverse to first start I read about savestyle but I want to use best way and short one. I try a lot of variant like '.delay(2).reverse();' or even .to(element, { delay:2,y:200 }); That work with delay but reverse doesn't work .to(element, { delay:2,reversed:true }); Thanks for your kindness and Good day

Gsap 3 - return animation to start without delay How can I return my animation to start point without any animation after the effect? on example my h1 go right stay there 1-2 sec and back to left - How can I eliminate that delay and How can I return immediately to start point without animation Thanks for you help!!

you can see it https://www.apple.com/iphone-12-pro full parallax page huge performance and still work well