Animation On load the page
Cross-browser animations for you to use in your projects.
scale
Slip
dangles
Flip
rock
glow
beat
pulse
fade
pinch
swap
bounce
spin
flipped
slide
slip
Animation On scroll the page
Cross-browser animations for you to use in your projects.
Fade In
Fade In Up
Bounce
Bounce In Up
Light Speed In
Fade In Down
Bounce In Left
Flip Horizontal
Tada
Text and Images
Manual and Usages
method 1 without Stacks
Add the class “scroll..” to the element you want to animate.
Using a short code without External plugin or Stacks.
You can use it in any page, also in RapidWeaver Blog, File sharing and so on.
Compatible with: Classic text, Text with classes ( titles), fixed images, responsive images and icons.
CODES LIST
scrollfade = FadeIn
scrollfadedown = Fade In Down
scrollfadeup = Fade In Up
scrollslideup = Slide In Up
scrollslideleft = Slide In Left
scrollsliderigh = Slide In Right
scrollbounce = Bounce
scrollbounceleft = Bounce In Left
scrollbounceup = Bounce In Up
scrollbouncein = bounce In
scrollspeedin = Light Speed In
scrollflip = Flip In X (horizontal)
scrolltada = Tada tumult
FULL CODE
Examples with scroll 1 (Fade In)
ICON - FADE IN
method 2 with Stack
Yo can use these codes also with stack plugin and a free stack CSS BOX by JoeWorkman.
With this stack you can add a new class ( CSS code) to your content easily.
Compatible with text and any stack. Some limitations only in stack with dynamic elements or existing animations.
1: Download the Free Stack CSSBOX
Ope the Stack page in the site of the developer joeworkman.net
2: Drag the Stack in your project and add the “scroll” value in the field “class”.
3: Add scroll …
Drag inside the CSSBOX your stack and then test the page ( scroll the page to animate the element) in preview mode.