Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

About Laurie

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. Laurie

    Text mask animation

    Thanks a lot Zach! 😃
  3. Laurie

    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 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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 !
  11. Of course, this is very clear now ! Thanks a lot Rodrigo !
  12. 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
  13. 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