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?

My apologies.. forked it and fixed the comment issues.. I started testing something out so thats why commented. https://codepen.io/designsbyharp/pen/YzyYJPW?editors=0010

Okay done: https://codepen.io/designsbyharp/pen/abvVOeL?editors=1100 Any way to fix my main function doCount()? Thank you.

This is what I have so far coming together quiet well! https://codepen.io/designsbyharp/pen/abvVOeL?editors=1010

Okay thank you. 1) yes I’ll use scaleY - transform properties 2) yes it didn’t feel right lol.. didn’t seem clean either 3) yes I’ll do just that, I’ll create a barebones version on codepen and resend a more complete version. Thank you.

1) make the bar grow to 100% 2) once bar groaws fade out the current numbers and place the new numbers: 1-2 turns into 2 - 3 I did this so far but didn't work right: Any guidance on what is maybe wrong or how to improve? /* * Purpose: Looped slider * * 1. make slider bar grow 100% * 2. make numbers change * 3. change background image * */ export default function indexSlider(){ const sliderBarDynamic = document.querySelector("#sliderBarDynamic"), count = document.querySelectorAll(".count"), sliderImage = document.querySelector("#sliderImage1"); // other animation in another js file: console.log(eA().totalDuration()) = 4.2 let tl = gsap.timeline({ delay: 6.2}); tl .to(sliderBarDynamic, {duration: 4, height: "100%"}) .add(function(){ for(let i = 0; i < count.length; i++){ if(count[i].classList.contains("count-is-active")){ count[i].classList.remove("count-is-active") // count[i].classList.add("count-not-active"); // count[i+1].classList.remove("count-not-active") // count[i+3].classList.add("count-is-active") } } }) .to(sliderBarDynamic, {duration: 0.4, height: 0, transformOrigin: "0% 100%"}) .to(sliderImage, {duration: 1, opacity: 0}, "-=0.2") }

Hello, Hope everyone is safe and well. I wanted to learn how to make an image slider like this: https://www.canvasunited.com/ How/where can I get started and say if I have a loading bar which once fills up it changes the slide.. how do do that? Thank you. Any tips would be greatly appreciated.

Okay made the changes: https://codepen.io/designsbyharp/pen/wZdxbE?editors=0010 Does this look better? But start/restart/pause don't work on the second run through.. How come TweenMax does the trick and loading.to/set doesn't? Thank you.

Hello, All event listeners are working for me except for this one: Function creation let fadeOutHeroContent = function(){ console.log('Lets fade ".hero" out...'); loading.to(heroEL, .5, { opacity: 0, ease: Power4.easeOut }); } code on line: 22 - 25 Function call on event listener: // User option to skip ".hero" content - remove it skipEL.addEventListener( "click", fadeOutHeroContent); code on line: 46 Full code is here: codepen link Thank you.

Hello folks!! Hope everyone is having a great Saturday! I have a question. I created a slider and it fades the image in from scale value 1.2 to 1 and fades out to scale value .8 then I'm resetting the image so it will come in back from value 1.2 with clearProps: 'scale(1.2)' It all works fine but once the image scales to value 1 it jumps.. not sure why, tried to use clearProps: 'all' but just need scale to go back to value 1.2 before the image fades in. issue seems to be the clearProps which is located on line 111 and 144. Also, to add in my css I have set the transform: scale(1.2) so the first image starts from that value and also in clearProps it keeps resetting to 1.2(default css value). Let me know if this approach is wrong and whatelse I maybe doing wrong. Thank you all! Here is the codepen: https://codepen.io/harp30/project/editor/ALPxOW

Okay okay. So, in this case its best to just have two separate timelines without connection to master(no need for master)? Thank you. Learning a lot! Very passionate about this stuff so everyones guidance really means a lot and because of it I'm improving.