search

johnpolacek / superscrollorama

The original jQuery plugin for supercool scroll animation. NOTE: No longer under active development. New version is ScrollMagic.js
http://johnpolacek.github.com/superscrollorama/
2.39k stars 539 forks source link

Start animation, interupt, continue animaton #57

Closed LennyDiggelen closed 11 years ago

LennyDiggelen commented 11 years ago

there!

I hope that somebody can help me out with a problem I stumbled upon. I want to animate on a scroll by using the superscrollorama plugin. With GSAP I can use a timeline to change the position of an element on scrolling.

I want the following actions to take place:

  1. Move the element from -1900px to 550px on screen by scrolling.
  2. After that, let the element stay at it's position while scrolling a certain amount of pixels (let's say 2000px).
  3. After the 2000px without movement, let the element move from it's current position to 1900.

So we have an animation of an element from the left side of the screen, to the right with a pin moment.

I hope someone can help me out here because I have not succeeded in writing a code that doesn't conflict with the first animation and a pin moment. This is what I have so far: 

controller.addTween('body',(new TimelineLite()).append([TweenMax.fromTo($('#vogel'), 1, {css:{left: -1900}, immediateRender:true}, {css:{left: 550}})]), 1000);

It's not much but I hope somebody can help me out here!

janpaepke commented 11 years ago

Hi Lenny,

I hope I understand your question correctly. Here's what I would do: Just add two separate Animations to your object. First starts at 0 and scrolls for 1000 pixels and the second at 3000 (1000 + 2000 of standing still).

Hope this helps.

regards, Jan

P.S.: Sorry for the late answer, I was on vacation.