jonathanrace77

Thanks so much! Looks like the sign up and post was worth it after all!

Solved. There was another animation in the main App.js. I'd taken out "import gsap..." from here which caused it to freak out.

So I've been putting some animations together in React using 'from', so far so good. I start to realise that I'm going to have quite a few of these so decide to create a separate component for all of the animations and then import them in. Out of the 4 animations though, only one of them works properly and that's the 'to' animation. With the 'from' animations, they are stuck in their 'from position' and won't move. main App.js: import React, { useEffect } from "react"; import "./css/style.css"; import animations from "./animations.js"; ... useEffect(() => { animations(); }); ... animations.js import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const tlAboutTitle = gsap.timeline(); const tlAboutPic = gsap.timeline(); const tlAboutText = gsap.timeline(); const tlSkillBar = gsap.timeline(); var staggerTime = 0.3; const animations = () => { tlAboutTitle.from("#about-title", { scrollTrigger: { trigger: "#about-title", start: "bottom bottom", markers: true, }, opacity: 0, x: "-50px", }); tlAboutPic.from(".jonathan-box-left-gsap", { scrollTrigger: { trigger: ".about-jonathan-box-right", start: "bottom bottom", markers: true, }, opacity: 0, x: "-50px", stagger: staggerTime, }); tlAboutText.from(".about-jonathan-box-right-gsap", { scrollTrigger: { trigger: ".about-jonathan-box-right", start: "bottom bottom", markers: true, }, opacity: 0, y: "50px", stagger: staggerTime, }); tlSkillBar.to(".about-skill-bar-fill-design", { scrollTrigger: { trigger: "#experienced-about-skill-box", start: "center bottom", markers: true, }, width: "100%", stagger: staggerTime, }); }; // Exporting the component export default animations;