harp

Error: Uncaught TypeError: Cannot add property _gsap, object is not extensible import React, { useRef, useEffect } from 'react'; import { gsap } from "gsap"; function Loading() { // Store a reference of needed dom elements const loadingHeading = useRef(); // wait until DOM has been rendered useEffect(() => { gsap.from(loadingHeading, { opacity: 0 }) }) return ( <> <section className="loading"> <div className="loading__content"> <h1 ref={loadingHeading} className="loading__heading heading--xl color--dark-grey mb-60"> La Camicia </h1> <p className="para--lg color--mid-grey"> An elegant <span className="font--italic">Shirt Configurator</span> prototype created by Harpreet Singh. </p> <p className="para--lg color--mid-grey"> Thank you for visiting. Hope you enjoy it. </p> </div> </section> </> ) } export default Loading;

Okay thanks, actually going over that now the youtube video of someone I think was confusing me. whats does the current mean? useEffect(()=> { gsap.to(boxRef.current, { rotation: "+=360"}) })

Why do have to use a function in ref when using gsap and react? import React, { useRef, useEffect } from 'react'; import logo from './logo.svg'; import './App.css'; import gsap from 'gsap'; import gsapCore from 'gsap/gsap-core'; function App() { let circleYellow = useRef(null) let circleRed = useRef(null) let circleBlue = useRef(null) useEffect(()=> { gsap.from(circleYellow, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'}) gsap.from(circleRed, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'}) gsap.from(circleBlue, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'}) }, []) return ( <div className="App"> <header className="App-header"> <div className="circle-container"> <div ref={el => circleYellow = el} className="circle circle--yellow"></div> <--- when I use just circleYellow I get this error: TypeError: Cannot add property _gsap, object is not extensible <div ref={el => circleRed = el} className="circle circle--red"></div> <div ref={el => circleBlue = el} className="circle circle--blue"></div> </div> </header> </div> ); }

Not sure why the last element is fading out, Foreach should stop at the last element, this version is continues that last tween even after all elements are finished looping and if I use, repeat: -1, the first element comes in with no animations but a jump: https://codepen.io/designsbyharp/pen/gOaJrzP I made a previous version of this slider and it worked fine, last element stopped when it should: https://codepen.io/designsbyharp/pen/jObpWZg What maybe wrong in my code?

ohhhh thanks! Issue was didn't need .staggerFrom but just .from and add in stagger property.. thanks!

This is the full error: Uncaught TypeError: Cannot create property 'runBackwards' on number '0.5' at Timeline.staggerFrom Not sure what this error is never seen it, what could be wrong with the staggerFrom code? Thank you.

Okay got it working!! Thank you for all the help. I definitely need to refactor the code and go through Getting Started article a few times in greater detail, which I'll do now. If theres any pointers, please let me know and I'll start refactoring the code more. Objective: Animate slides but don't do anything to the first slide, only animate the first slide like the others when timeline restarts/repeats to create the same consistent flow and animations. This is what I created and thank you for helping! Completed Slider

ohhh okayyyyy so with .fromTo, the .fin this is the starting point and .to in this is the end point. if you only use .from then its the starting point as well but ends at the already set css value or if a value is set with.set if you use just .to then it creates a new value and works with it. .fromTo creates a new starting point and end point.. is this correct?

okay got it thanks! here is the just .from version. It only grows the dynamicBar once.. shouldn't it work on every slide? and why does having scaleY: 1 work with a .fromTo? and not just .from? just .from

Trying to understand whats happening here with .fromTo: slides.forEach((slide, i) =>{ tl .fromTo(dynamicBar, {delay: 1, duration: 3, scaleY: 0}, {duration: 2, scaleY: 1}) }) I tried .from only but it doesn't work, how come I have to use .fromTo to make the dynamicBar grow over and over again? Also delay doesn't work.. need it to grow 5 seconds after the first one does but also make it fade away and then grow again. Thank you. https://codepen.io/designsbyharp/pen/YzyvEep

okay thanks. im trying to animate the second slide in now.. but not working: https://codepen.io/designsbyharp/pen/VwvyVJq

https://codepen.io/designsbyharp/pen/MWarzqJ Getting this error: gsap.min.js:10 Uncaught TypeError: Cannot set property 'parent' of undefined at ca (gsap.min.js:10) at Timeline.to (gsap.min.js:10) at pen.js:20 at NodeList.forEach (<anonymous>) at pen.js:19 const sliderTL = gsap.timeline({repeat: -1}); const slides = document.querySelectorAll(".slide"); slides.forEach(slide => { sliderTL.to(slide.querySelector(".slide__text", {duration: 1, opacity: 0})) })

ohhh just use to a count thats why wondering,. So it will loop through each slide and its elements will be animated. If we wanted to use buttons then we would use count references right.. but for an infinite loop slider its not needed?

okay thanks, this is very helpful I'll redo it with these points you made. Question: also!!! I made my slider wrong then in html!!!! each slide(.slide) should have its own image, text, and etc. then loop through each slide for a forEach and animate each of its elements right? where to insert the count value? slides.forEach(slide => { tl.to(slide.querySelector(".text")[currentCount]}); And to increment the count best to use a .wrap() utility function?