[access each tween in timeline]

Thank you.

 

const tweens = timeline.getChildren();

for(var i = 0; i < tweens.length; i++) {
   if(tweens[0].progress() === 1){
      console.log('hit');
   }
}

Here, i wanted to console log , after the the first tween of the timeline ends. What i am doing wrong?

[access each tween in timeline]

Hello,

 

i created a timeline and want to access each tween individually. How can i do it?

 

Furthermore i want to add a general function to the end of each tween. I used .add() after each tween, but is there another way to solve this?

 

Thank you in advance.

 

Regards Daniel

[Membership License]

Hello,

 

which license is required, if am selling websites and want to use greensock within my projects?

 

Regards

Daniel

[Console is returning: Failed to load gsap.min.js.map]

Here is my gsap.min.js file:

 

https://github.com/Daniel20ZA/project

[Console is returning: Failed to load gsap.min.js.map]

im getting these errors:

 

[Warning] Invalid property – "opacity" – "set to" – 0 – "Missing plugin? gsap.registerPlugin()" (gsap.min.js, line 11)
[Warning] Invalid property – "y" – "set to" – 35 – "Missing plugin? gsap.registerPlugin()" (gsap.min.js, line 11)
[Warning] GSAP target null not found. https://greensock.com (gsap.min.js, line 11)

[Console is returning: Failed to load gsap.min.js.map]

I was running my project on localhost and I was using only greensock and scroll magic.

Now im facing the problem that probably scrollMagic isn't working. I have made several animations but now on one page the animations cant be executed.

 

"Maybe the problem is ScrollMagic. It hasn't been updated to work with v3."

 

How can I solve this?

[Console is returning: Failed to load gsap.min.js.map]

thank you for your help

[Console is returning: Failed to load gsap.min.js.map]

The problem is solved. I putted the .map-file in the same folder as gsap.min.js!

 

 

[Console is returning: Failed to load gsap.min.js.map]

here are the files: https://github.com/Daniel20ZA/project

[Console is returning: Failed to load gsap.min.js.map]

it seems that the data is too big in my folder. Is there any other way to upload it?

 

[Console is returning: Failed to load gsap.min.js.map]

proFolder

 

I don't have the gsap.min.js.map file. It wasn't in the folder of GreenSock.

 

 

 

[Console is returning: Failed to load gsap.min.js.map]

Hi Zach,

 

no, I use vs-code.

I downloaded gsap and embedded it locally.

I also embedded:

 

<script src="./js/gsap.min.js"></script>

<script src="./js/scrollmagic/ScrollMagic.min.js"></script>

<script src="./js/scrollmagic/animation.gsap.js"></script>

<script src="./js/main.js"></script>

 

in the same sequence like above.

[Console is returning: Failed to load gsap.min.js.map]

Hello guys,

 

I have included gsap.min.js in a folder. After taking a look in the console, I noticed that I am getting the notification that the gsap.min.js.map file failed to load (404).

I am confused about this error, because I just included gsap.min.js in my folder and not .map file.

What is wrong here?

 

Thank you in advance.

 

Regards Daniel

 

 

[Rerun animation on click after closing menu]

thank you Mikel!

[Rerun animation on click after closing menu]

Hello guys,

 

I am trying to animate a menu, with two different timelines (open and close). Everything works fine.

There still one little issue I need to solve: 

After closing the menu and toggle the  button to open the menu, the open-animation doesn't work / run.

 

Here is my code:

menuIcon.addEventListener('click', MenuAnimation);

var menuState = 0;

 

function MenuAnimation(){

 

if(menuState == 0 ){

menuState = 1;

 

tl.play();

 

} else if(menuState == 1){

 

tl_remove.play();

 

menuState = 0;

}

}

 

Thank you in advance.

 

Regards 

Daniel

 

See the Pen abbgBKq by Daniel2024 (@Daniel2024) on CodePen

[Open and Close menu]

ok, thanks

 

First timeline is running , but the second one isn't . What is wrong in my code?

/ second timeline for reverse method

 

const secTimeLine = new TimelineLite({ paused: true });

 

secTimeLine.to('.slide-container', 0.5 , {

opacity: 0,

ease: Ease.easeIn

});

 

function closeMenu(){

tl.play();

}

 

// event

document.querySelector('.menu-icon').addEventListener('click', animateNavbar);

 

// animation status

const isAnimated = false;

const isOpen = true;

 

function animateNavbar(e){

// check for false

if (isAnimated.current) {

return;

}

 

// set to true

isAnimated.current = true;

 

if(isOpen.current) {

openMenu()

} else {

closeMenu()

}

 

}

[Open and Close menu]

Yes, got it. So I have to delcare my openMenu() and my closeMenu(), where i insert my timelines outside of the toggleMenu function , right ?

 

const isOpen = useRef()

I can call useRef however I want , right?

[Open and Close menu]

I was going through the code , but I didn't get it.. I am not really familiar with react..

 

I changed my code. How can I add the second timeline for the reverse method?

document.querySelector('.menu-icon').addEventListener('click', animateNavbar);

 

function animateNavbar(e){

 

tl.reversed() ? tl.play() : tl.reverse();

}

[Open and Close menu]

if I want to add a second timeline for the reverse method , how can I do it?

 

So first i am running the first timeline and when i click to close the menu I want to add a different timeline..

 

[Open and Close menu]

@ZachSaucier , appreciate your help. Thank you ?

[Open and Close menu]

Hello guys,

 

im trying to animate a menu with TweenMax.

If I click the menu-icon , the animation works properly and menu is viewable , but when i click again the animation doesn't work.

 

Thank you in advance.

 

Regards

Daniel

 

 

See the Pen mdbQLLa by Daniel2024 (@Daniel2024) on CodePen