[Gsap is free for company use?]

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!!

[pursue element at Angular 9]

1 hour ago, Sub X said:

If you are using css variables I think you should always use it on the root style.css
or make a variable.css file and import it on you component css
this will fix your problem I think.
 

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

[pursue element at Angular 9]

On 9/10/2020 at 11:57 AM, Sub X said:

Import ViewEncapsulation from '@angular/core'
it works for me 
 

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

 

 

[more priority in timeline]

15 minutes ago, mikel said:

Hey @Lichay,

 

Do you expect such a 'timing'?

 

 

 

 

Here another example: different durations and positions

 

 

 

 

Happy tweening ...

Mikel

Thanks it really work.

 

The property duration do the job, I think at first have another property something like priority.

 

Thanks @mikel

[more priority in timeline]

22 minutes ago, mikel said:

Hey @Lichay,

 

As an experienced GSAP forum user, you should know that your case presented in a small CodePen helps everyone.
So please do it .

 

Happy tweening ...

Mikel

Done

[more priority in timeline]

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

See the Pen OJbpdeX by lichaytiram (@lichaytiram) on CodePen

[Report for bug => pin => iPhone]

16 minutes ago, ZachSaucier said:

Sorry, I still have no idea what the error is supposed to be based on your description. Can you please show a video or something of the perceived issue?

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

Ill record tomorrow

[Report for bug => pin => iPhone]

1 hour ago, GreenSock said:

I looked at it on my iPhone 12 Pro as well and didn't notice any unexpected problems.

 

Please note that iOS Safari shows/hides browser chrome when you swipe up/down which literally changes the height of the page. ScrollTrigger can't magically solve that for you. In order to avoid a sudden stop in scrolling or jump, it defers the refresh until scrolling ends. You can, of course, force a refresh() if you prefer, but you'll have to accept the tradeoffs (loss of momentum scroll and potentially a jump). 

 

Also, I would really appreciate it if you would stop making accusations about there being "bugs" in GSAP/ScrollTrigger without first making sure that there aren't logic issues in your own code or perhaps a misunderstanding on your part. You keep doing this and in every case so far it has been logic problems in your code or misunderstandings. 

 

Thanks.

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

[Report for bug => pin => iPhone]

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.

I can add video record from my iPhone in need.

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

[Gsap add inline style after animation]

On 2/1/2021 at 7:40 AM, GreenSock said:

Yeah, I didn't look closely at your logic in there, but the problem was that you've got the ScrollTrigger wired to an animation with an onComplete which is then looping through and adding click listeners. I wouldn't recommend structuring it that way - it'd be cleaner to just use a variable like "clickable" that's false initially, and then you toggle it to true in the onComplete, but you create all your listeners outside of that onComplete. 

 

I updated my demo to show you how I think you wanted it to function - it also uses an onRefresh and onRefreshInit to save the progress of the animation and re-apply it so that the animation maintains its progress even when you cross the media query thresholds.

 

 

 

Better? 

 

That doesn't appear to be true: 

 

 

 

But it would run for a tween that's attached to a ScrollTrigger because when you resize, it affects the progress of the scroll, and the animation that's attached would be adjusted. 

 

Side note: I'm also going to adjust the behavior in 3.6.1 so that if you kill() an animation, it'll also kill() the attached ScrollTrigger. 

 

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)

[Gsap add inline style after animation]

13 hours ago, GreenSock said:

Yeah, you're asking to replay a tween, but use totally different starting values (which isn't a true replay). You could just invalidate() those animations when ScrollTrigger refreshes so that they basically dump all their starting values and re-record them on the next render: 

 

 

 

Is that what you're looking for? 

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

[Gsap add inline style after animation]

46 minutes ago, GreenSock said:

I'm still confused - are you seeing different behavior with the onComplete: () => this.progress(0).kill() than without it? All that's doing is rewinding and killing the animation, but if it's already set to yoyo, it's not doing anything different. A yoyo ends where it started anyway. So it seems completely redundant to me.

 

Yes, that was the whole point I thought you wanted a different animation that runs from a different spot at the various screen sizes. 

 

If you want it to maintain the progress, you can record the progress value and resume from there: 

 

 

 

Can you please explain what you mean? 

 

after animation finish (go and back) it should let you click on that 

in my example 

See the Pen QWGWPoj by lichaytiram (@lichaytiram) on CodePen

 

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)

[Gsap add inline style after animation]

55 minutes ago, ZachSaucier said:

To prevent the animation from running again when the media query is reached I'd probably use a variable to keep track of state:

 

 

but click event isn't include 

it should be click after animation stop play

[Gsap add inline style after animation]

10 hours ago, GreenSock said:

By the way, I noticed you're doing this after a yoyo: 

onComplete: function () {
  this.progress(0).kill();
}

I'm curious why you're doing that. I can't see any benefit. 

 

Here's a quick demo that resets things on resize and works the way I think you wanted: 

 

 

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 

 

See the Pen QWGWPoj by lichaytiram (@lichaytiram) on CodePen

and again broken inline style

[Gsap add inline style after animation]

8 hours ago, GreenSock said:

By the way, I noticed you're doing this after a yoyo: 

onComplete: function () {
  this.progress(0).kill();
}

I'm curious why you're doing that. I can't see any benefit. 

 

Here's a quick demo that resets things on resize and works the way I think you wanted: 

 

 

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

 

[Gsap add inline style after animation]

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?

See the Pen jOMgdJv by lichaytiram (@lichaytiram) on CodePen

[reverse Gsap event with timeline Gsap 3.0 and higher]

On 1/27/2021 at 3:06 PM, mikel said:

Hey @Lichay,

 

Did you understand the logic of the two variants?

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 :-) 

[reverse Gsap event with timeline Gsap 3.0 and higher]

1 hour ago, GreenSock said:

Can you please provide a link to where the bug was confirmed? I've glanced at most of your threads (not all 141 posts) and in every single case that I've seen, the problem was in your code, not a bug in GSAP. But maybe I missed something, so I'd appreciate it if you could provide a link or some evidence of this "bug". I definitely want to make sure any bugs are fixed. 

 

If you're referencing this thread...

...You kept claiming it was a bug but that was incorrect - the problems were all logic issues in your code and you never provided substantiation for your claims. I asked over and over again for a minimal demo and clear description but you posted a link to Apple's web site which wasn't helpful. Perhaps I missed something, though, in which case I want to get things clarified and resolved.  At this point, there are zero confirmed bugs from any of your threads.

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)

[reverse Gsap event with timeline Gsap 3.0 and higher]

9 hours ago, GreenSock said:

Can you please be more specific? Where was the confirmed bug? 

on my post with pining + data speed

[reverse Gsap event with timeline Gsap 3.0 and higher]

1 hour ago, GreenSock said:

@Lichay you have been asked many, many, many times to provide a minimal demo that clearly shows the issue in context. You did that in your original post (thank you!), but then Zach provided you a list of problems that he noticed in your code. If you want help, you must provide an updated demo (maybe fork the old one) and clearly explain what isn't working the way you'd expect. When you keep coming back with a simple "I tried everything...it doesn't work" that doesn't allow us to see where you mis-applied the fixes or what other issues exist in your code. 

 

We have burned quite a few hours trying to bend over backwards to help you (almost 140 posts now), but if you continue to refuse to provide the information we request yet ask vague questions and insist the problems are due to "bugs" in GSAP, you'll wear out your welcome here and we'll need to close your account. I'd really hate to do that. 

 

We genuinely want to help. 

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.

[reverse Gsap event with timeline Gsap 3.0 and higher]

1 hour ago, elegantseagulls said:

Hi @Lichay,

 

I'm not entirely sure what you're looking for but I'm thinking you just need a repeat, yoyo, and a repeatDelay:

gsap.to(element, {
  y: 200,
  scale: 1.3, 
  repeat: 1,
  yoyo: true,
  repeatDelay: 2,
});

 

Thanks it really work

[reverse Gsap event with timeline Gsap 3.0 and higher]

2 hours ago, ZachSaucier said:

Hey Lichay. Again you have multiple things going wrong. I highly recommend spending more time reading the docs and trying to understand existing demos to try and get a firmer understanding of how things work in GSAP. As it is, asking us every single question that you have is much slower than learning how to properly read the docs. It will save you time to learn how to properly use the docs.

 

Your mistakes:

• It doesn't make much sense to apply a ScrollTrigger to a timeline that is created on click. You should probably remove the ScrollTrigger.
• Applying .delay() to a timeline like what you're doing just adds a starting delay to the timeline, as the docs specify.
• Applying .reverse() to a timeline like what you're doing immediately reverses a timeline, as the docs specify.
• Since you're creating a new animation each time, after the first completion your animation won't do anything visually. Most likely you should either reuse the same animation or use .fromTo() instead. I highly recommend actually reading and understanding my article about animating efficiently.

There are a lot of ways of reversing a timeline after a delay. You could add an empty tween of the duration that you want to the end and then apply repeat: 1 and yoyo: true to it. Or you could use a .delayedCall() to call .reverse() on the timeline in the timeline's onComplete. Or other ways.

 

Please make sure to thoroughly go through the relevant documentation before posting to our forums so that you can save both our time and your own time.

 

GSAP 2 has the exact same logic as GSAP 3, only the syntax has been changed in some ways. By following the migration guide you should be able to update any GSAP 2 demo to GSAP 3 with ease.

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.

 

 

[reverse Gsap event with timeline Gsap 3.0 and higher]

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

See the Pen wvzVWaE by lichaytiram (@lichaytiram) on CodePen

[Gsap 3 - return animation to start without delay]

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!!

 

See the Pen NWRZEKe by lichaytiram (@lichaytiram) on CodePen

[pin with scrollTrigger kill the position to opacity]

55 minutes ago, GreenSock said:

I'm not sure what you're referring to - I never said "create your own ScrollTrigger" (except earlier in the conversation I said that if you think this functionality is so "basic", perhaps you should create your own tool like ScrollTrigger). Maybe you're talking about where I advised that you write your code so that the ScrollTriggers are created in the order they'll be triggered in the viewport (top to bottom). Do you need more clarification than that? 

 

Of course - if you only apply a filter once and there's no animating of the filter values, the load on the browser only happens on that initial render so it'd seem fast. But you're animating a filter value which forces the browser to re-calculate and re-render all those pixels 60 times per second. Trust me - you're paying a large performance penalty by using filters. And again, that's totally unrelated to GSAP. 

 

If you need any more help, feel free to create a minimal demo (like in CodePen) and provide a clear explanation of what's going wrong and we'd be glad to take a peek. 

you can see it 

https://www.apple.com/iphone-12-pro

full parallax page huge performance and still work well