Michaël Garcia
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Michaël Garcia
-
-
I'd like to do some animations with the elastic.inOut easing.
On the other hand I don't want the elastic part on my ease in. Is there a way to obtain such an easing without the utilisation of CustomEase ?
Indeed, it's hard to get precise with CustomEase.
I'd like to have something like that :
I dived into this outstanding tool but in vain : https://greensock.com/docs/v3/Eases
Thank you very much
-
Indeed, the observer plugin worth definitely it in my case! Thanks for the advice.
Also I didn't know about the "_short" trick, thit is literally awesome.
Thanks again for your time!
- 1
-
I like to create a drag effect that makes my shape rotate around a circle.
It works great, I'm also using the quickTo method to add some cool easing on it.
My issue is that when the rotation is complete, it all starts again by reverting. I'd like to keep my current position and go back to 0 directly.
Should I kill and recreate my quickTo tween when I'm beyond the complete rotation ?
Thank you
See the Pen JjMQmJJ by michaelgrc (@michaelgrc) on CodePen
-
Hello,
I've been playing with the Flip plugin and it looks super powerful.
I still have an issue though : I want to simply Flip.fit() an element regarding another.
My problem is that the output element is moving and scaling.
At the moment my element doesn't follow the output one. It only goes to its initial state.
Is there a way to update the fit() value during its animation so my fit() element follow the other one during the animation ?
I made a codepen to illustrate my problem.Thanks you very much
See the Pen bGaWmZV by michaelgrc (@michaelgrc) on CodePen
-
Hi everybody,
I've been experiencing an issue with the MorphSVGPlugin.
I've a shape composed of a path. I want this shape to transform into a basic rectangle.
When I animate it, the transformation looks weird as you can see here :
- video
- codepen (it looks like we can't use MorphSVGPlugin on Codepen)
So I've been wondering how can I improve my animation because so far it's not very beautiful, it's not even symmetric. For your information, I already tried to convert my rectangle to a path and I've the exact same render.
Thanks a lot
See the Pen eYegdBx by michaelgrc (@michaelgrc) on CodePen
-
Thanks a lot for your answer.
I didn't know this method. I'm gonna dive into it!
-
On the back office of my website, the client can build pages using modules in the order he wants (for examples he can creates several horizontal scrolls or several pined sections)
On the front side, I do something like this :
// declarations document.querySelectorAll('.slider').forEach(slider => { // my scrolltriggers gsap.to('....', { scrollTrigger:slider, ... }); }); document.querySelectorAll('.horizontalScroll').forEach(horiS => { // my scrolltriggers gsap.to('....', { scrollTrigger:horiS, ... }); }); ScrollTrigger.refresh();
Unfortunately I can't chose the order of the sections in the DOM and I noticed it creates weird issues (regarding the start and end positions of all my scrollTriggers) . Even if I refresh all my scrollTrigger in the end, a lot of the trigger are not correctly set.
Does anyone has good advices to prevent this behavior ?
Thanks a lot.
-
I'd like to make a simple parallax, but I noticed I have a weird behavior when I link it with scroll trigger.
And it's not the first time I observed it.
I try to reproduce it on a codepen but it seems to work. Here's a screenshot of what happen on my website :
It also happen sometimes when I do a mask reveal animation :
when a child goes from -100% to 0%, regarding on the percentage of the parent in the viewport.
Do you have any ideas on how to optimize this parallax effect, or this mask reveal effect ?Thank you very much
See the Pen JjyOYJW by michaelgrc (@michaelgrc) on CodePen
-
I got it !
I learnt a lot here. Thank you very very much for your time and your precious explanations 💥- 2
-
Damn it looks cool !
So basically, when the ScrollTrigger.refresh() method is called, the getToValue() function is called too so the x: value is recalculated right ?
And this won't be possible without the invalidateOnRefresh attribute set to true, double right ?
I'm amazed with this solution, I'm gonna try it.
-
Hello everyone,
I'm super glad to work with scrollTrigger, it's a very powerful tool. On the other hand, I can't manage a situation :
In a modular page I might have several parts with an horizontal scroll. In order to animate these parts I'm doing this (and it works like a charm) :
// each time there an horizontal scroll document.querySelectorAll('.carousel').forEach(carou => { // calculating the width of the section const translate = carou.querySelector('.innerCarou').clientWidth - window.innerWidth; gsap.to(carou.querySelector('.innerCarou'), { x: -1 * translate + 'px', ease:"power1.inOut", scrollTrigger: { trigger: carou, start: 'top top', end: '+=' + translate + 'px', pin: true, scrub: true } }) })
But it happens that the width of my horizontal scroll changes. So I'm calling the
ScrollTrigger.refresh()
method to update all my scrollTriggers.
Unfortunately, my variabletranslate
is not updated so my gsap is not correctly working. How can I manage to update both my gsap and its variables ?
Thanks a lot -
That makes sense indeed.
Once again thanks for the explanations !
- 1
-
Hi,
I would like to kill my ticker now.
Unfortunately, it doesn't seems to work when I reproduce the model of the arrow function that starts my ticker :
// lauch my ticker, it works gsap.ticker.add(() => this.playTicker()); // remove my ticker, it doesn't work gsap.ticker.remove(() => this.playTicker());
I made a codePen to illustrate my issue : my
init
function lunch the ticker and mykill
function is supposed to remove it. You can see my ticker is still running after I called thekill
method.See the Pen qBqogBy by michaelgrc (@michaelgrc) on CodePen
Does anyone see what I'm missing ?
Thank you very much
-
Hey @ZachSaucier, thanks for the answer.
For your information I finally managed to fix my issue : I had to add the parenthesis on the
ScrollTrigger.update()
call.Everything works great now 👍
- 1
-
Hey @ZachSaucier,
I added the changes you suggested but my issue is still here.
Here's a video of the behavior of my scrollTrigger element (I simply applied it to my image): https://www.dropbox.com/s/0fpux9z4kgci4uw/Enregistrement de l’écran 2021-02-24 à 12.24.48.mov?dl=0
As you can see, it's not an FPS issue, plus my smooth scroll is still fluid.
Maybe my
ScrollTrigger.update
method is not called on every frame ?I tried to call
ScrollTrigger.update
on myrequestAnimationFrame()
function to be sure it's called on each frame, but it didn't solve my issue.Do you have any other lead ?
Thank you very much
-
Hey @ZachSaucier,
thanks for your answer.
Actually I already made it. I made my own smooth scroll with all the classic features for a smooth scroll for example
.init()
,.destroy()
,.resize()
...The idea is to only use gsap on my project. I was thinking that if I simply provide the current transformation to my scrollerProxy() method everything should work great. But yeah studying code from existing smooth scrolls looks like a great idea
-
Hi,
I made my own smooth scroll which basically changes the
transform:translateY
value of my element.I wanted to plug it with ScrollTrigger so I used the
ScrollTrigger.scrollerProxy()
function.Eventually, my animation is connected to my smooth scroll.
Unfortunately, as you can see on my CodePen bellow, the animation made with ScrollTrigger is not smooth at all.
I event tried to call the
ScrollTrigger.update
method to fix this but it doesn't change anything.Does anyone see what I'm missing ?
Thanks a lot !
See the Pen WNoZLPM by michaelgrc (@michaelgrc) on CodePen
-
- 2
-
Hey @elegantseagulls,
thanks for your answer. So I added this attribute but it seems to add a new issue on both my codePen (you can see it right above) and my project.
It adds an extra height at the end of my page. When I inspect it, it seems to be the section set inside the
trigger
attribute.Do I miss something ? Thanks a lot
-
Hello,
I'd like to reproduce a css sticky behavior.
Unfortunately as you can see on my codePen, it doesn't keep pinned until the end of my section despite the
end
attribute.Does anyone see what I'm missing ?
Thanks a lot
See the Pen bGBEdRZ by michaelgrc (@michaelgrc) on CodePen
-
Hello @akapowl,
thank you very much. Your explanations help a lot.
- 1
-
Thanks for your answers.
I tried to combine the
scrub
and thetoggleActions
properties but I can't make it work.Does
toggleActions
can work whenscrub
is activated ?So I finally chose to use two ScrollTriggers. But eventually it jumps when the second transition plays :
Does anyone see what I'm missing ?
-
Hello,
I gradually change the background color of my viewport when an element appears.
I would like to gradually go back to the normal when this same element disappears from the viewport if you're keep scrolling.
Is is possible to do so inside the same scrollTrigger object ?
I tried to do the exit animation with another gsap.to() but it jumped.
Thanks you very much
See the Pen GRNJGYb by michaelgrc (@michaelgrc) on CodePen
-
Thanks you guys for the amazing support !
- 1
Creating an elastic.inOut easing with a regular ease in
in GSAP
Posted
Thank you! Indeed it works like a charm!