medmedmed75

Hey everyone, I was inspired by that website parallax effect. When i'm using parallax, i usually do a transform: translate3d(0, (val)px, 0) and height: 120% on the image in a container that have an overflow: hidden for masking. On the website I mention above, the translation has been executed on the container, himself wrap in an other div that have a mask. The image is never taller than the translated container div. Any idea to achieve that kind of results?

Hey everyone! I was wondering if it possible to : first, create a Timeline then, on each tween, apply a ScrollTrigger with a different trigger for each element. The idea is to create a timeline where I can create animation for each element .hero, .infos, .other and the triggers would be these classes. <section> <div class="hero"> <h1>Title</h1> </div> <div class="infos"> <div> <p>blablabla</p> </div> </div> <div class="other"> <div> <h2>Subtitle</h2> </div> </div> </section> Maybe I can do something like this but it creates multiple ScrollTrigger reference. const tweensConfig = [ { type: "to", classname: ".hero", x: 100, }, { type: "from", classname: ".infos", opacity: 1, }, ] const createAnimation = () => itemsClass.map(({ type, classname, ...rest }) => gsap[type](classname, { scrollTrigger: { trigger: classname }, ...rest })) Sorry in advance if I did a duplicated post and I just read the common mistakes usage for ScrollTrigger but I can't find a solution. Many thanks for your help

Hey @Rodrigo Sorry for the late response, off for the weekend but thank you so much for your explanations and source! Good inspiration I will maybe purpose something but I think Next should a more flexible routing (as Nuxt for example). Thanks again !

Hey everyone! I was wondering if it possible to animate a page before the route change? I'm currently using a classic technic with Router.push(newUrl) when the animation is completed but I'm losing the anchor tag SEO benefit. Any idea ?

Sorry, it was just a misunderstanding on my part (about scale3d). All is very clear, thank you so much for your help and reactivity!

If I understand well, the transform3d is here just to perform the tween via the GPU (the thing I want btw lol)? So the motion is still performing by the transform() and not the transform3d? And, last question, what about scale3d? Can I use it just using force3D? Many thanks for your clarification, it helps a lot! 🙏

@GreenSock thanks for your response! Maybe I'm confusing with the translate(...) and translate3d(...) I see in Chrome Devtool. During the tween, I see translate() (with values changing) and translate3d(0, 0, 0) with no values changing. I mean, I thought I would only see translate3d performs does that mean it's working?

Hey everyone! I have some trouble using force3D Here is an example: const tl = gsap.timeline() gsap.config({ force3D: true }) tl .set('div', { yPercent: 100 }) .to('div', { yPercent: 0, duration: 1, delay: 1 }) Maybe i'm using it wrong? (I don't create a codepen because the code is very simple) Many thanks for your help

@ZachSaucier Wow that's so nice! never seen it, game changer!

Hi @elegantseagulls I tried everything... but not to register my ScrollToPlugin and it works very well. Many thanks, I edit my post with the solution!

Hello everyone, I'm currently working on a React project and I need to use ScrollToPlugin. Here is how I import the plugin import gsap from 'gsap' import ScrollToPlugin from 'gsap/ScrollToPlugin' And then, to prevent some troubles in production, added const plugins = [ScrollToPlugin] Then I have a scroll ref const scrollRef = useRef(null) And finally this is how I used the scrollto function const scrollTest = el => { gsap.to(window, {duration: 1, scrollTo: el }); } <button className={s.btn__scroll} onClick={() => [setScrolled(true), scrollTest(scrollRef)]}>Go Down</button> After many researches, I thought it was due to an import issue. So I've tried to insert cdn script directly in the public html... doesn't work. Any ideas? SOLUTION As @elegantseagulls said below, you just have to register your ScrollToPlugin as follow : gsap.registerPlugin(ScrollToPlugin) Many thanks

@OSUblake For your information. Never try it but seems legit. https://medium.com/@tomaszferens/delay-unmounting-of-the-component-in-react-8d6f6e73cdc

@OSUblake React Transition Group. I just want to understand the logic of RTG, not something else... just trying to understand. So, no, I can not make a demo. Thanks for your help.

@OSUblake thanks for your response. You are right, that's why I ask for a solution. Yes, just saw that before. I thought it was a bit complicated to understand how to apply it. Finally, RTG "just" timeout the unmount of the component?

Hello everyone! I've got some troubles to make my transition between 3 differents components. The logic is pretty simple : I just want to go from opacity 0 to 1 when component is being mounted (easy with hooks / stateless components, or componentDidMount / react class) and to go from opacity 1 to 0 when the component is being umounted. Neither the useEffect nor the componentWillUnmount are working for this transition. I admit that's a pretty simple transition but impossible to do when component is unmount. Here is the function fired when Homepage, About Us or Corporate are clicked : toggleBetweenAllPages = () => { const page = this.props.toggle.page if (page === "homepage") { return <Homepage /> } else if (page === "corporate") { return <Contact /> } else if (page === "about us") { return <Infos /> } } Hope this is clear and thanks in advance for your help!