Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by raizo

  1. 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!

    • Like 1
  2. 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.

  3. 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.

  4. 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?

  5. 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) {



    function resetAnimation(anchorLink, index, slideIndex, direction, nextSlideIndex) {


  6. 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({});
          0.2, {
            autoAlpha: 1,
            opacity: 1,
            ease: Power1.easeIn


    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>


    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({});
            autoAlpha: 1,
            opacity: 1,
            ease: Power1.easeIn
        if (index == 2 && slideIndex == 1) {
        if (index == 2 && slideIndex == 2) {



    Can someone help me and put me on the right track

    please see my fiddle:  https://jsfiddle.net/jqk753m7/5/

    See the Pen by jqk753m7 (@jqk753m7) on CodePen

  7. I tried logging some of your variables and I don't think things are working the way you expect.

    For instance newClicked inside your click handler is undefined.

    I think the root of the problem is this:

    $newClicked = $('target')

    I don't follow all the conditional logic in your demo so I'm hesitant to try to fix it all.

    However, here is a very reduced example of how you click on your buttons, grab the number you need from the target attribute and use it to show a div.

    I think it will help you see how to make some adjustments to your code



    var currentSection;
    TweenLite.set(".targetDiv", {display:"none"})
     $('.bttns').on('click touchstart', function(e) { 
       console.log("you clicked on ");
       console.log("the number you want is " + e.currentTarget.getAttribute("target"));
       var sectionNumber = e.currentTarget.getAttribute("target")
         TweenLite.set(currentSection, {display:"none"})
       currentSection = $("#work_main" + sectionNumber)
       TweenLite.set(currentSection, {display:"block"})


    See the Pen NpLYxz?editors=0011 by GreenSock (@GreenSock) on 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?

  8. 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

    See the Pen jBGYPj by spaarwt001 (@spaarwt001) on CodePen