[How can I run image frames without animations?]

ummm, any idea how i can run the animation automatically with short delays inbetween?

[How can I run image frames without animations?]

wow, this worked perfectly rodrigo! many thanks

[How can I run image frames without animations?]

I am trying to run a short movie of background images without any animations between these. The code below does not work. Any ideas why?

 

var frameHeight = 585

 

var timeline = new TimelineMax({useFrames: true}),

i

 

for (i = 0; i < 9; i++) {

timeline.append(TweenMax.to(

'#spark h1 a',

1,

{

backgroundPosition: 'center -' + (frameHeight * i) + 'px',

useFrames: true,

frame: i

}

))

}

 

this.addScene(new ScrollScene({

triggerHook: .5,

triggerElement: this.getID(),

duration: 400

})

.setTween(timeline)

)

 

Thanks!

[How can I run multiple Tweens in parallel in a Timeline?]

fantastic, many thanks man!

[How can I run multiple Tweens in parallel in a Timeline?]

Hello everyone

 

How can I run both Tweens in parallel?

 

.setTween(new TimelineMax()

.add(TweenMax.fromTo('#intro', .5, { backgroundPosition: "50% 0vh" }, { backgroundPosition: "50% 20vh" }))

.add(TweenMax.to('#intro p.hint', .5, {autoAlpha: 0}))

)

 

Been searching for clues in their APIs but found none. Thanks for a quick hint!

 

- Michael

[Moving each letter inside from bottom, by random]

Here's another challenge: I would like to move letters from two long words into the center of the screen. From bottom. Each letter by random while the user is scrolling.

 

How can we do this with ScrollMagic?

[How to animate two equal halves moving in the opposite direction?]

Hello guys
 
I have an interesting challenge here and need this effect to be done in the next 48 hours!

 

Here is the HTML:
 
      <section id="edge">
        <article>
          <div id="innovation">
            <p>To provide</p>
            <h1><span>leading edge innovation</span></h1>
          </div>
 
          <div id="world">
            <p>To the country at the</p>
            <h1><span>leading edge of the world</span></h1>
          </div>
        </article>
      </section>

 

The section is one page among many other scrollable pages. It has two equal divs, each one is 50% wide on each side. div#innovation should move in from top to bottom, div#world should move in the opposite direction, from bottom to top. Both will disappear outside.

 

They should move at the same speed while the user is scrolling down to the next page.

 

How can we achieve this with ScrollMagic?