raizo

Really well done mate, this was exactly what I was looking for. I achieved the same effect but instead of using pixi.JS is switched over to animation spritesheet and animated it with steps() using the GSAP library. Thanks for sharing!

I am a little stuck right now, and due to some private information I can't share the animation I am making. I am also a very novice in Javascript, maybe you can provide me with a little help, to put me on the right path.

Hi again, So I found this little tutorial, http://www.instrument.com/articles/tedx-making-wonderland. And I got it working. But I want to fade in/out the dissolve effect into a white page, and if it possible to add an effect so it looks like you getting sucked in somewhere, does anyone know or have a idea how to do this? like this codepen:

That is a nice effect which is similar to the animation I want to achieve, except the animation wil trigger as an page transition and not on scroll. I will be using PixiJS to render the textures and Gsap for the animation.

Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.

Now I want the animation to run once per slide and not to repeat everytime. so I thought of removing the function resetAnimation would do the job. But it seems if I do that all the slides will load at the same time. What might be the cause of this?

so what did you do to trigger the elements in view? "slideElements" ? I used your code, but all slides still seems to be loaded at once. Is it because of the declaration, i might did the nesting wrong. *update i got it working I changed the array [nextSlideIndex] function resetAnimation(anchorLink, index, slideIndex, direction, nextSlideIndex) { slideAnimations[nextSlideIndex].pause(0); } to function resetAnimation(anchorLink, index, slideIndex, direction, nextSlideIndex) { slideAnimations[slideIndex].pause(0); }

Hi there, I am integrating GSAP with fullpageJS. for some slides, i am using the same timeline for the elements to fade in when a user gets on a new slide. This is how i set my animation var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn },0.2); for now the animation will run for all slides when the user gets to a slide. for example if the user gets on slide 1, the content fades in. but when I swipe to slide 2, the content is already in view because the animation was played for all slides. this is how all my slides (will) look like. <div id="slide2" class="slide"> <section class="content"> <h3 class="title">slide 2</h3> <p> content </p> </section> </div> I am using the callbacks provided by FullpageJS in combination with GSAP. I know $(this) refers to the specific element you want to target, but I can't seems to find a way to refer to $(this) in a timeline. Its working fine except the animation is triggered for all slides, which needs to be only for the loaded slide. see how i make use of the callback provided by fullpage with some gsap. afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { var workTitle = $(".title"); var workContent = $("p"); var content = [workTitle, workContent]; var loadedSlide = $(this); var tl2 = new TimelineLite({}); tl2.staggerTo( content, 0.2, { autoAlpha: 1, opacity: 1, ease: Power1.easeIn }, 0.2 ); if (index == 2 && slideIndex == 1) { tl2.play(); } if (index == 2 && slideIndex == 2) { tl2.play(); } } Can someone help me and put me on the right track please see my fiddle: https://jsfiddle.net/jqk753m7/5/

scrollmagic might be a better solution for what you want to achieve.

Hi there, I wonder how I can achieve the animation to wait until it's reversed and play for the current item. example. if I clicked a item animation the animation will play. click different item, reverse animation for current item and play animation for new current item. please see my codepen

Thank you Carl, this is a much better solution to my click and display related div way. But the problem i'm dealing with is that in my animation the div will animate from display none to display block when you hover over the button. but the div will also show when I click the button. But because of the animation the div will set to display none again once you unhover the button, this is also when you clicked the button. How can I force the div to stay visible when it's clicked?

The error is gone now, but it didn't solve my problem. see updated codepen

Hi all, I have been stuck because of this click function I want to work. Basically what I want to achieve is if you hover on the item the animation wil start and when unhover the animation wil reverse, this happens to work really good. The part i'm having problems with is the click function. if the user click on the button the div that is related to the button will be shown. Right now if the button is clicked the div will hide or not being shown. I think the reason for the related div not being shown is because of the Gsap animation. I could help some advice for keeping me in the good direction how I could make this work. see my codepen