['From' not working (React import component)]

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

['From' not working (React import component)]

Solved.

 

There was another animation in the main App.js. 

 

I'd taken out "import gsap..." from here which caused it to freak out.

['From' not working (React import component)]

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;