Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by DD77

  1. I'd like the polygons to be more smooth and the scroll to be more "parallax" feeling.

    I'd also like the functionality to be a bit more dynamic, possibly.

    The Polygons, should move smoothly on scroll , appearing on different sizes and positions, perhaps colours. Its all dove in css. 
    If anyone ha an example of code or something that would be great.

    See the Pen XBMEqV?editors=1010 by davide77 (@davide77) on CodePen

  2. I'm trying to achieve a smooth transition when the images changes, a blue background should  "function as a mask with the images".

    1 - text appears,
    2- first image appears, 

    3- blue background ('#foreground') smoothly comes down and up 
    4- second image appears.

    I have an example , https://ueno.co/ 

    So to recap, the image before changing a foreground should come down and then up again. 
    I hope someone could help me as I'm stuck.

    See the Pen vrRweK?editors=1010 by davide77 (@davide77) on CodePen

    • Like 1
  3. @Visual-Q, Dude thanks for taking notice of my post here... 
    What I'm after is a SLIDER, simply a slider in gsap. I build something with a preloader, which is using a imagesloaded plug in. I was trying to incorporate both and make a smooth transition between a loader and the slider.  

  4. I'm trying to animate all this element on the svg with a bit of sense, so the feet look like the walking:-) 

    I'd like to achieve : 

    - path { they should animate with delay, so I could have the feeling that they are walking.  }

    - line {it's a stroke which should animate from 0 to 100%.}

    - polygon (are two arrow that should fade.)


    I hope it's something that you guys could quickly fix. 

    See the Pen jZgQjz by davide77 (@davide77) on CodePen

  5. Ok, enough with the bolloking please. I know all the above And I will try my best to remove or improve it. The thing is that if I was that good to make it as you say I was probably able to do it myself without asking for advises or help. I appreciate all your suggestions though. 

  6. I created this demo which shows a slider with a preloader. The GSAP slider is completely out of sink and doesn't slide on time. 
    How can I load the images and the slider together? It would be nice to have this function working together nicely.
    Also the fading on the images are a bit glitchy . I might have used to many alphas.

    See the Pen mXjqJJ?editors=1010 by davide77 (@davide77) on CodePen

  7. :x I have this tween1 that should should work on click and then reverse in case I scroll back. 

    My tween doesn't work, the click doesnt play and so the reverse doesnt work,  so:


    -on click toggle active which will make the  f active will have tween1.reverse()


        var tween1 = new TimelineMax();
        tween1.to(".click-element", 0.3, {className: "+=active", x: 500, paused: true  }, 0)
        .to('#section-2', 0.3,{className: "+=darkblue", paused: true }, 0)
        $(".click-element").on("click", function(e) {
        var scene1 = new ScrollMagic.Scene({
          triggerElement: "#section-2",
          offset: 50
        .on("leave", function() {
          .setClassToggle("body", "darkblue")


    See the Pen BJoayE?editors=1010 by davide77 (@davide77) on CodePen

  8. @Sahil I appreciate there are roles for the forum, but in this case Gsap is the protagonist here.
    Specially on this function. I think I didn't explain myself properly.


    If you look at my demo, the click event should do the animation, and not scrollMagic. So this is GSAP. but yes, I need a to revert the animation once I scroll back, only if the animation is started... Does it make sense? 


    See the Pen PEqvvX?editors=1010 by davide77 (@davide77) on CodePen

    Thank you for all your help. 

  9. But on click it should reverse the animation, looks like it jumps. I've added but doesn't work. Also the animation should be triggered only by the click event, is just when I scroll back that is revesing.....:-(


        $(".click-element").on("click", function(e) {

    See the Pen PEqvvX by davide77 (@davide77) on CodePen