DD77

@OSUblake thanks, that's brilliant. I'm fine with one child/item.  I'd like to have this 
tl.to(child, 1, { y: -180, ease: Linear.easeNone }); on multiple polygons, with different y value. possibly:-) 

@OSUblake thanks, for your help. I've done something like this.  Any thought? multiplier aren't really my best friends..
 

@Carl thanks for your support, as usual really helpful. 
I saved the pen and now you can see the animation triggered and the GSAP working. Unfortunately it doesn't feel at all parallax. 

Any thought?

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

@Visual-Q  @Carl
I managed to do something close on what I wanted.  If anyone has an Idea on how to improve it please feel free to add comments

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

@Shaun Gorneau lovely!! I love golf! I need something simpler,  perhaps faiding images with no arrows, just navigation (dots). 
my one on to works almost fine, just not sure is not smooth

@Dipscom I can see the light my fried:-) 

is there a way we can integrate clickable buttons width active state like mine? 

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

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

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. 

Loader above



Slider below

@Dipscom HI mate, ok, I broke it down in 2:

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

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

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

@Diaco hi Diaco, I managed to make a video of what I need, would it be possible to make it in gsap this slinky animation? 

- starts from standing and after one roll stops.

Would it be possible?

slinky.m4v

@Jonathan thanks, yes I've seen it, but not sure I can replicate that with a hover state. Is it possible with gsap? 

I've seen this from @OSUblake 

See the Pen WQyBJb?editors=1010 by osublake (@osublake) on CodePen

I was wondering if anyone of you had a chace to see this website.  I have a project which will require some of those effects.
- play button which turns into a overlay?
- the effect on the image?

- the wave effect on the text?

Would be great to see if anyone had a chance to creat or see something like it before? Or so kind to share some demo?

http://taotajima.jp/works/itsuka-no-hoshi/
 

Yes, Great work Diaco and lennco! I managed to use it and I managed to make it working with ScrollMagic:-) 

I'm trying to animate it with scrollMagic, and I'm struggle at the moment... 

I need to create a animation, I made a slinky demo in css that suit perfectly but is not a gsap build and I need it animated. 
I'm trying to replicate the same but I'm a bit far away.

Could anyone help me to create this slinky animation?  It should open up.

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

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

 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()

    //CLICK EVENT ON SECTION 2, AND WHEN SCROLLING BACK TO SECTION 1 IT SHOULD REVERT ALL

    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) {
      $(this).toggleClass('active');
      tween1.play();
    });

    var scene1 = new ScrollMagic.Scene({
      triggerElement: "#section-2",
      offset: 50
    })
    .on("leave", function() {
      tween1.reverse();
    })
      .setClassToggle("body", "darkblue")
      .addTo(controller); 

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

@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

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) {
      e.preventDefault;
      console.log('click')
     $('.click-element').addClass('active');
      
      if($('.click-element').hasClass('active')){
         $('.click-element').removeClass('active');
        tween1.play();
        
      }else{ 
        $('.click-element').addClass('active')
        tween1.reverse();
      }
    });

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

@Sahil thanks, nearly there, that helps a lot. I need it on click, AND if I scroll back animation reverse. is it possible?

@Sahil lol sorry I know:-) 
I'm a bit under pressure as I need to sort this functionality out. I made this so far, but looks like the .click-element is already taking the tween1 .
I using alt scrollmagic site but this functionality is a bit tricky.

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