Victor Work

In fact it is only for simple cases like hover, even knowing that you can use GSAP to do the hover, sometimes the css solves with simplicity and everything there at the time of stylization. But his explanation was very enlightening. Many thanks Jack, not only for the explanation but for developing a tool that is certainly is the revolution of web animations ❤️

in fact I did not even know that there was a way to put the transiton only for certain attribute of style. By these and others I speak, living and learning, and learning from the best (GSAP Moderators). ❤️ Thank you for the explanation

Hello GSAPers, I created the courage to ask a question I always had, why does Ease (GSAP) not work correctly when the element has Transition (CSS)? Sometimes I want to create a simple hover through css, but I always see strange behavior if I'm animating the element in a Timeline: Demo:

Great Sahil, that was just it. Thank you @Carl, @PointC and @Sahil Love Us ❤️

but this is continuous, similar to what happens with OnUpdate. Can you increase the progress without releasing the button?

hahaha, I'm using the translator and maybe this is not helping. Let's step by step: I need it when the customer presses the button to start revealing the bar, and when you release the bar, do the reverse, and when it reaches the end of the animation it pulls an event. Similar to my pen, the only problem is that the progress of the animation is not running by holding the button down but rather at the initial click of the event. And this is not letting the animation time align with the button press. see this site (https://www.2017.aristidebenoist.com/), it has a button trigger similar to what I want to do. Did you get it?

Let's see if I can be clearer: I need to synchronize the timeline with the mouseDown event. I want to define that the tween has the progress to the event, something similar with that button.on('mousedown', function() { tween.progress(+=.1) }) Could I be clearer?

I would like to know the best way to synchronize tween progress with the hold button. Problem: if I quickly release the button and then hold it does not synchronize with time (start var), so the Tween ends before the setTimeout

Hello Carl, I believe he is referring to the effect of this gif: https://dribbble.com/shots/4137241-E-commerce-UI-interactions @Vipul.K take a look at this tutorial, I believe I can help you: Result: http://cssing.org.ua/jela/jela.html

Thanks Sir @Dipscom

Hello GSAPers, I would use something like: $el.click(() => { new TimelineMax() .to(...) } Is correct or disruptive in performance

Many thanks Carl, this will solve a lot of my problems, again GSAP saving our lives. I love this Lib

Another example within a real need. skip to line 200

But I need a gentle ease in the back and ease between the animations, I gave an update in the pen to illustrate

and how do I do when I need to ease the animations? Is there a way to set easeNone in a function?

Is there a way for me to give tweenTo bypassing the pause to have a smoother transition?

When reverse each Tween on TimelineMax

Using this example, how do I run the onReverseStart function every time I reverse, and not just when I change the timeline's direction?

Thanks @Shaun Gorneau

Hello Gsap'ers, Another post about the function so requested: Transition between pages using our beloved GSAP. But unlike the others, instead of questions, I am bringing some answers. I decided to make a Simple site template with SPA, which I believe will help everyone who is looking for solutions to these tools without having to use a framework. The activation of transitions is very simple: just click on the photos to go to the corresponding page. I hope it's useful. Ps¹: It is necessary to use the BarbaJS lib Ps²: Some settings are still missing and you can optimize the codes, best experience in Debbug Mode View Ps³: I'm using the translator hahaha https://codepen.io/Noturnoo/project/full/ZeYREp/

Hello @harp, I do not quite understand if this is your problem regarding scaling, but I chose to make an example using .fromTo that can help you.

I'm using the translator and maybe this conversion is messing up in my mind, let's see if I can explain it in more detail. Let's take into consideration the site: https://www.videinfra.com/ when you do a MouseDown on the screen it activates a draggable element that runs all over the screen, this draggable has a sniap that stops at a certain point, gives the trigger to an animation. I would like to achieve the same effect, the scale part applies more to benmingo site that does the same dynamics above, but with scale in the elements of the page, the problem is being manipulate the snap, could I explain better?

I'm going to study a little bit about this method, although I do not have any in-depth knowledge of some of the features that you used in your example, and let's combine that basic and equivalent to the advanced one for many people, especially my hahahha. One question, I always see you creating this proxy element in Draggable, why is this created?

in fact I would like to create a Slide with Snap using Draggable that onPress give a scale in the content so that I can make the transition in the mouse moves. Sorry if it was difficult to understand. But I'm not getting it, so I wonder if there is a way to do this with Draggable

Hello guys I am trying to make a draggable slide like these: https://www.videinfra.com/ (Page Home) http://www.benmingo.com/ (Page Home) https://bullyingandbehavior.com/ (Page Home) I tried to do with Scale in the Holder but it did not work very well, the closest I got was changing the vw of the holder. But now I do not know what I can do: does anyone help?