[[SOLVED] Transition Css & GSAP | Conflict]

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 ❤️

[[SOLVED] Transition Css & GSAP | Conflict]

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

[[SOLVED] Transition Css & GSAP | Conflict]

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:

See the Pen xzNRze by Noturnoo (@Noturnoo) on CodePen

 

[Synchronize .progress() with mousedown]

Great Sahil, that was just it.
Thank you @Carl,  @PointC and @Sahil

 

Love Us ❤️

[Synchronize .progress() with mousedown]

9 minutes ago, Carl said:

Se você quer que a animação progrida de 1/10 em cada vez que o último snippet de código sugerido, você poderia fazer

 

See the Pen vrxMvM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

but this is continuous, similar to what happens with OnUpdate.

Can you increase the progress without releasing the button?

 

[Synchronize .progress() with mousedown]

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?

[Synchronize .progress() with mousedown]

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?

[Synchronize .progress() with mousedown]

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

See the Pen dKvgxM by Noturnoo (@Noturnoo) on CodePen

[Can this mouse distortion effect be created with GSAP?]

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

[Do not assign TimelineMax() to variable. Is correct?]

Thanks Sir @Dipscom

[Do not assign TimelineMax() to variable. Is correct?]

Hello GSAPers, I would use something like:

$el.click(() => {
  new TimelineMax()
  .to(...)
}

Is correct or disruptive in performance

[Ignore. addPause() on tweenTo]

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

I love this Lib

[Ignore. addPause() on tweenTo]

Another example within a real need.

skip to line 200

 

 

See the Pen PQQZKq by Noturnoo (@Noturnoo) on CodePen

 

[Ignore. addPause() on tweenTo]

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

 

See the Pen QmqxpK by Noturnoo (@Noturnoo) on CodePen

 

[Ignore. addPause() on tweenTo]

See the Pen rdGrmR?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

 

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

[Ignore. addPause() on tweenTo]

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

See the Pen QmqxpK by Noturnoo (@Noturnoo) on CodePen

[Detect reverse start event]

When reverse each Tween on TimelineMax

[Detect reverse start event]

On 12/03/2014 at 3:32 PM, GreenSock said:

I see what you mean. The behavior you're describing wouldn't technically be an "onReverseStart" because in GSAP, "reverse" means something very particular - it's the orientation of the tween/timeline in the context of its parent timeline. So, for example, imagine the parent timeline's playhead moving forward across where this particular tween resides - if the tween is reversed, it will play in the opposite direction as the parent playhead moves forward. And remember that you can also reverse() that parent timeline, so a reversed tween inside a reversed timeline will appear to play forward even though technically its "reversed" value is true.

 

The behavior you're describing is attempting to discern when the local direction of the playhead changes, and you can accomplish that with an onUpdate like this:

var tl = new TimelineLite({onUpdate:checkDirection});
var lastTime = 0;
var forward = true;
tl.to(...); //add your tweens or whatever

function checkDirection() {
    var newTime = tl.time();
    if ((forward && newTime < lastTime) || (!forward && newTime > lastTime)) {
        forward = !forward;
        console.log("changed direction");
        if (!forward) {
            onReverseStart();
        }
    }
    lastTime = newTime;
}

function onReverseStart() {
    //do stuff
}

The concept is just to check the time and compare it to the last recorded time - that tells you the local direction of the playhead. When you sense a change, you can call your function or run whatever logic you want. 

 

Does that help?

 

 

 

 

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

 

See the Pen YaVZOK by Noturnoo (@Noturnoo) on CodePen

 

[Transition Between Pages with GSAP using BarbaJS]

Thanks @Shaun Gorneau

[Transition Between Pages with GSAP using BarbaJS]

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

 

See the Pen ZeYREp by Noturnoo (@Noturnoo) on CodePen

[clearprops causing animation to jump when complete timeline]

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.

 

See the Pen jzEJPj by Noturnoo (@Noturnoo) on CodePen

 

[Draggable w/ Snap & ThrowProps | Dynamic Velocity]

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?

[Draggable w/ Snap & ThrowProps | Dynamic Velocity]

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?

[Draggable w/ Snap & ThrowProps | Dynamic Velocity]

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

[Draggable w/ Snap & ThrowProps | Dynamic Velocity]

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?

See the Pen oqvbXg by Noturnoo (@Noturnoo) on CodePen