[Combining GSAP Timelines and Flip]

THANK YOU Jack! I didn't know the Most common GSAP mistakes! I'm gonna read it immediately!

[Combining GSAP Timelines and Flip]

Hello Jack,

 

Thank you for the answer and the demo ! 😃

However, I'm still wondering how to achieve this kind of animation : I try to add a clearProps: 'scale' to my animation, because it seems the Flip does not working with the transform. I just want to animate 2 steps :

- 1st step : change the background color and the scale of the square

- 2nd step : Center the square in the body (as a fixed element) - and I think the Flip plugin is perfect to do that, right ?

 

Here's the new CodePen I did, with clearProps (but we can still see the square is not centered because of the transform properties)

See the Pen wvPWKym by LaurieVince (@LaurieVince) on CodePen

 

Thank you again, Laurie

[Combining GSAP Timelines and Flip]

Hello everyone,

 

I am testing the new Flip plugin and I'm wondering how to use it with Timelines. Here's an example of my curiosity : I'd like to animate an element with a timeline, then use the Flip method pour add a class name to the body for a fixed position. Am I right with it ? It seems the position is not working as I exepected... I attached my CodePen to my post to illustrate it.

 

Thank you, Laurie

See the Pen QWONVzy by LaurieVince (@LaurieVince) on CodePen

[SVG Morphing for overlays]

Thank you PointC !

I didn't notice I had to hide the second path in my SVG.

Here's a new test :

See the Pen dyvMZrm by LaurieVince (@LaurieVince) on CodePen

 

I'm wondering how to create with SVG Morph the same effect linked my previous post. I tried to use transformOrigin but I failed.

 

Thanks again,

 

Laurie

[SVG Morphing for overlays]

Good morning,

 

I've been trying to create an effect for a long time, but I can't quite figure it out.
I found so many topics here, and I'm so grateful for all the community.

 

I saw this topic and this is actually what I'm trying to create with some waves shapes - made with the SVG Morph plugin !

It looks close to the effects I saw on CoDrops here, and I tried to do this with the plugin (but I failed, in my Codepen that I linked)

Other inspiration for that kind of effect is :

See the Pen vYyWdYK by artdev616 (@artdev616) on CodePen

 

I'm not an export in SVG and have some limited knowledge about animations, but I really would like to know how to achieve this kind of effect to include this in my portfolio (to find a great job in front-end development!).

 

Could someone help me on this topic?

 

Thanks in advance,

 

Laurie

 

See the Pen BaWKoqE by LaurieVince (@LaurieVince) on CodePen

See the Pen zYZqvJN by LaurieVince (@LaurieVince) on CodePen

[How to create a draggable slider]

Hey,

 

I saw this post about the conception draggable slider using GSAP.

I search for a tutorial to make this type of slider for hours, but I don't find it.

So, I'm wondering if someone knows a good tutorial to create this.

 

Thanks a lot,

 

Laurie

See the Pen GebNVz by cedi44 (@cedi44) on CodePen

[Text mask animation]

Thanks a lot Zach! 😃

[Text mask animation]

Hi Zach, 

 

Thanks for the answer! Yes, SVG is probably the best way to create what I want.

I saw the thread, and found

See the Pen ZxKymB by PointC (@PointC) on CodePen

 : this is almost what I try to create.

But is this possible to insert the background directly in the text area to reproduce the image I linked in my first post ? I never used SVG before.

 

Thanks again,

 

Laurie

 

[Text mask animation]

Hi,

 

I'm wondering how I can create a text mask animation. 

Actually, I don't know if it's possible to create something like this without SVG.

Here's a preview of what I'd like to make :

https://ibb.co/C50cJ4b

I would like to animate the mask (that is black in the picture). 

 

I saw this post in the forum, but actually I'm a beginner and I don't know how to create what I want.

 

Thanks a lot ! 

 

Laurie

 

[Am I doing well ? | React Hook + GSAP]

Sorry for the delay. 

Thanks a lot for the answer.

 

One last thing :

I'm wondering if I'm right if I write simply the simply syntax for gsap :

gsap.to(".myContainer", { color: "red", scale: 1.2, delay: 1 }); 

Do you know if it's a good method to write the class name with React, or should I use only Refs ?

 

Thanks again,

 

Laurie

[Am I doing well ? | React Hook + GSAP]

Thanks OSUblake ! 

 

Actually, I didn't know for the easings. Great news !

I'm trying to only use hooks, with GSAP. But I don't know how to correctly target elements. 

I read that we have to use refs but I don't know if this is a correct method for GSAP. 

What do you think about that ? 

 

Thanks again!

 

Laurie

[Am I doing well ? | React Hook + GSAP]

Hey ! 

 

I'm experimenting GSAP3 with React Hooks - that I learn everyday. 

And as a beginner, I just want to know if my code is ok or not. 

The animation is very easy, but I'm worried about the useEffect and useRef utilisation with GSAP and even if the animation's working, I'm interested to write the best code I could.

 

Here's the example I made.

 

If someone had a few minutes to take a look,  it would be very kind!

 

Thanks a lot, and have a great day!

 

Laurie

 

 

[Time not respected when mix-blend-mode is used]

Hey Zach, thanks for the answer! 

 

I just wanted to animate the mix-blend-mode on an image, like this :

See the Pen BaNjGdb by LaurieVince (@LaurieVince) on CodePen

 

Any recommandation ?

 

Thanks again,

 

Laurie

[Time not respected when mix-blend-mode is used]

Hey !

 

I'm trying to use mixBlendMode in the new GSAP, but the duration is not respected. The effect works, but immediately, even if I write a duration of 4 seconds. 

Is everyone can help me with this issue ? 

 

Thanks a lot,

 

Laurie

[scrollTo Plugin with React JS (does not working)]

Thanks a lot !  

[scrollTo Plugin with React JS (does not working)]

Hi @OSUblake,

 

Thanks for the recommandation ! 

But, can you explain to me your last line ? 

I'm so confused about imports. Yesterday, I tried to import ScrollMagic (with its plugins setTween + debug indicators), but I never found the solution. 

 

Thanks again !  

[scrollTo Plugin with React JS (does not working)]

Of course, this is very clear now ! Thanks a lot Rodrigo !  

 

[scrollTo Plugin with React JS (does not working)]

Hi Zach, thanks for the answer !

 

I created a CodeSandBox, because I don't know how to create a React JS Demo in CodePen.

This is very basic, but I think it describes my actual problem. 

 

Here's the link :

https://codesandbox.io/embed/busy-darkness-zdlmx

 

Thank you again ! 

 

- Laurie

[scrollTo Plugin with React JS (does not working)]

Hi ! 

 

I'm trying to include my scrollTo plugin animation in my React JS website. I found other topics, but I didn't found the answer that I'm looking for. Perhaps the solution is easy, but I didn't ! Nothing is happening when I'm trying to make the animation with scrollTo.

 

Here's a part of my actual code :

import React, { Component } from "react";

import { TweenMax } from "gsap";

import ScrollToPlugin from 'gsap/umd/ScrollToPlugin';

 

class Header extends Component {

  testScroll(){

    TweenMax.to('.nav-about', 1, { scrollTo: "#about" })

  }

 

  render() { 

    return ( 

      <div  className="nav-about" onClick={this.testScroll}> This is my big test </div>

    );

  }

}

 

export default Header;

 

I found how to import the ScrollToPlugin in my React App.  But the problem is : I'm wondering if this plugin is called or not. Because when I click, nothing is happening. 

Precisions : The section that has the id "#about" is written in another component. Perhaps is this the problem ?

 

Thanks a lot!

 

- Laurie

 

 

 

 

[Master Tl - Why the time transition is not respected ?]

Wow, thanks a lot Zach ! ?

[Master Tl - Why the time transition is not respected ?]

I made a little CodePen to explain my problem. Thanks very much Zach. Have a great day ! 

(I wrote start() and restart() functions in my mouseover and mouseleave events)

 

See the Pen VJBbLM by LaurieVince (@LaurieVince) on CodePen

[Master Tl - Why the time transition is not respected ?]

Hi Craig, 

 

Thanks for the answer. Unfortunately, it does not work. ?

No problem with  :

tl.start(0);

 

But if I write .restart();  after the play() function, nothing happens.

 

 

[Master Tl - Why the time transition is not respected ?]

Thanks a lot Zach. 

 

By the way, I'm confronted to a new (little) problem. If I don't use reverse(), but another animation I saw the play() function works only one time. Perhaps I made a mistake. But, looks weird. Any suggestion or idea ? Thanks again. Have a great day !

[Master Tl - Why the time transition is not respected ?]

Hi Zach, thanks for this explication ! 

 

And so is there a difference if i use yPercent: 100 or yPercent: '100%' too ?

 

Thank you again ! I'm going to update my code !  

[Master Tl - Why the time transition is not respected ?]

Hello, I'm Laurie !

 

I have created a codepen to explain my question, here's the link :

 

I have 3 blocks, and I want 3 different transformations for each. So I created a loop, and different functions with in a TimelineMax.

So, inside the for loop, I created my Master Timeline, to add each function I created before. Why did I do that ? Before on mouseover event I want to play the Master Tl, and on mouseleave event I want to reverse that animation. Perhaps this is not a good way to do that ?

My problem is : the color transition is not respected. I don't know why but on mouseover (or mouseleave) the time is not 1s like I wrote. 

 

Please, do you have an answer to this problem ?

 

Thanks a lot !!! ?

 

See the Pen PreNWM by anon (@anon) on CodePen