Laurie

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

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) https://codepen.io/LaurieVince/pen/wvPWKym Thank you again, Laurie

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

Thank you PointC ! I didn't notice I had to hide the second path in my SVG. Here's a new test : https://codepen.io/LaurieVince/pen/dyvMZrm 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

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 : this one 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 https://codepen.io/LaurieVince/pen/BaWKoqE

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

Thanks a lot Zach! ?

Hi Zach, Thanks for the answer! Yes, SVG is probably the best way to create what I want. I saw the thread, and found this 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

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

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

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

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

Hey Zach, thanks for the answer! I just wanted to animate the mix-blend-mode on an image, like this : https://codepen.io/LaurieVince/full/BaNjGdb Any recommandation ? Thanks again, Laurie

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

Thanks a lot !

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 !

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

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

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

Wow, thanks a lot Zach ! ?

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) I don't know how to insert an iframe so this is the link

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.

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 !

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 !

Hello, I'm Laurie ! I have created a codepen to explain my question, here's the link : https://codepen.io/anon/pen/PreNWM 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 !!! ?