Али К

Okay, but I said before ( I'M NOT ASKING ABOUT 3D ANIMATION) , Just i want to understand why my code not working as fade-in fade-out

Hey @Carl , yeah , but I just forget to add it here(I have it in my JavaScript file) , now you can check the code , you will understand what I mean

Hey guys , where is my mistake here , I want to have fade in - out between sections without to scroll down, example I don't ask for any 3d animation , I just want to know why the fade in - out not working. Thanks

Hey @ZachSaucier, I mean for example : when I click on dot1 should give me image number 1, and when I click on dot2 should show me image number 2...like that

The dots here is the title

Thank you @GreenSock

@ZachSaucier no , what i want it's another effect , it's like this https://codepen.io/japortegijs/pen/bGVdQmM just the problem here , because this effect with scrollMagic and i don't want to use it

Hey Zach , well it's not working i tried it

@akapowl how it is possible here ? https://codepen.io/itsalimanuel/pen/gOwVwMV

@akapowl work but not good , https://codepen.io/itsalimanuel/pen/VwKqYqd?editors=1111

The animation work, but so fast, how i can control the duration or the speed for this scroll ?

Hey @ZachSaucier , it's working now, Thanks ?

Hey there, i want to add an function to my ScrollTrigger, but it's not working . i want to play this function on enter and pause it on leave Why it's not working , and how to fix it?

Okay, https://codepen.io/itsalimanuel/pen/GRjbjQo

well, just now i add it , i think you mean like that onUpdate: function () { anim.goToAndStop(Math.round(this.targets()[0].frame), true) },

now I get here is my code https://codepen.io/itsalimanuel/pen/GRjbjQo

But how it is possible in ScrollTrigger to make the same effect?

Where is the problem here ? all the sections had , and this don't change by scrolling opacity: 0; visibility: hidden;

@ZachSaucier To post the code don't make any change , I mean , if I go out the section, the function will be off , and when I come back to the same section the function will be on again (it's like play on hover)

lt.call(function () { $('.c1').addClass('opacityOpen2') $('.c2').addClass('opacityOpen3') $('.c3').addClass('opacityOpen4') }) even if used .add() i will get the same result

var animDataTwo = { container: document.getElementById('image360'), path: 'https://assets.lottiefiles.com/datafiles/jORpumH9Yn0XoXQ/data.json', renderer: 'svg', loop: false, autoplay: false, name: "animScrollTwo", }, animScrollTwo, tl; var animScrollTwo = bodymovin.loadAnimation(animDataTwo) animScrollTwo.addEventListener('DOMLoaded', function () { tl = new TimelineMax({ repeat: 0 }) tl.to({ frame: animScrollTwo.totalFrames - 1 }, 1, { frame: 0, onUpdate: function () { animScrollTwo.goToAndStop(Math.round(this.target.frame), true) }, Ease: Linear.easeNone }) var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: ".image-360", offset: 300, duration: 6000 }).setTween(tl).setPin("#image360").addTo(controller); })

Hello @akapowl , thank you. did you have an example about this

Hey there, Is it possible to create a "fullpage animation " by gsap? example. Thanks

As you see in codepen link the animation work but not well, when you make a scroll the red element move as normal, also the blue element works normally, but if you continue scrolling, you will arrive at to step, you can't look at the animation. I want to move it as a position fixed moving my scroll.