[React and GSAP error]

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;

[react and ref]

12 minutes ago, OSUblake said:

Hi @harp

 

That's not the correct usage for a ref. 

let circleYellow = useRef(null)

 useEffect(()=> {
    gsap.from(circleYellow.current, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={el => circleYellow.current = el} className="circle circle--yellow"></div>

 

Or...

let circleYellow;

 useEffect(()=> {
    gsap.from(circleYellow, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={el => circleYellow = el} className="circle circle--yellow"></div>

 

Or the recommended way...

let circleYellow = useRef(null)

 useEffect(()=> {
    gsap.from(circleYellow.current, {duration: 0.8, opacity: 0, x: 90, ease: 'power3.out'})
  }, [])

<div ref={circleYellow} className="circle circle--yellow"></div>

 

Please check out React guide. It also shows another way using the selector util.

 

 

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"})

  })

[react and ref]

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>

  );

}

[Foreach loop error]

1 hour ago, harp said:

Okay thanks, I made the changes.


So i+1 wasn't doing anything really for the last slide because it couldn't find anything?
and I don't need to use "repeatBeginning" anymore because as the slides lop again via repeat: -1, everything runs fine.

Thank you.

 

[Foreach loop error]

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:

 

I made a previous version of this slider and it worked fine, last element stopped when it should:

See the Pen jObpWZg by designsbyharp (@designsbyharp) on CodePen

 

 What maybe wrong in my code?
 

See the Pen gOaJrzP by designsbyharp (@designsbyharp) on CodePen

[stagger error - 'runBackwards']

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

[stagger error - 'runBackwards']

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.

See the Pen eYpoYpw by designsbyharp (@designsbyharp) on CodePen

[Image Slider w/ GSAP]

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!

See the Pen jObpWZg?editors=0110 by designsbyharp (@designsbyharp) on CodePen

 

[Image Slider w/ GSAP]

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?

[Image Slider w/ GSAP]

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?

See the Pen dyYKZgO by designsbyharp (@designsbyharp) on CodePen

[Image Slider w/ GSAP]

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.

See the Pen YzyvEep by designsbyharp (@designsbyharp) on CodePen

[Image Slider w/ GSAP]

okay thanks.

im trying to animate the second slide in now.. but not working:

See the Pen VwvyVJq by designsbyharp (@designsbyharp) on CodePen

[Image Slider w/ GSAP]

See the Pen MWarzqJ by designsbyharp (@designsbyharp) on CodePen

 

 

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}))
})

 

[Image Slider w/ GSAP]

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?

[Image Slider w/ GSAP]

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?

[Image Slider w/ GSAP]

My apologies.. forked it and fixed the comment issues.. I started testing something out so thats why commented.

See the Pen YzyYJPW?editors=0010 by designsbyharp (@designsbyharp) on CodePen

[Image Slider w/ GSAP]

Okay done:

See the Pen abvVOeL?editors=1100 by designsbyharp (@designsbyharp) on CodePen

Any way to fix my main function doCount()?

Thank you.

[Image Slider w/ GSAP]

This is what I have so far  coming together quiet well!  

See the Pen abvVOeL?editors=1010 by designsbyharp (@designsbyharp) on CodePen

[Image Slider w/ GSAP]

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. 

[Image Slider w/ GSAP]

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")


}

[Image Slider w/ GSAP]

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. 

[addEventListener not working]

Okay made the changes:

 

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.

[addEventListener not working]

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.

See the Pen wZdxbE?editors=0010 by designsbyharp (@designsbyharp) on CodePen

[clearprops causing animation to jump when complete timeline]

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

See the Pen ALPxOW by harp30 (@harp30) on CodePen

[Play first timeline and then play second timeline "only" when user clicks on button]

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.