BRANDING
MOTION
PHOTO
AUDIO
BRANDING
MOTION
PHOTO
INTERACTIVITY, ANIMATIONS, EFFECTS
& CUSTOM FUNCTIONS
ADDITIONAL JAVASCRIPT & CSS
FILES LOCATION
SCRIPT & LINK TAGS TO LINK MUSE WITH THE ADDITIONAL JAVASCRIPT AND CSS
HTML Inserter
CUSTOM GRAPHIC STYLES
THE USE OF GRAPHIC STYLES TO INTEGRATE MUSE ELEMENTS AND THE ADDITIONAL JAVASCRIPT & CSS
Graphic Styles Panel
FUNCTIONS, EFFECTS & ANIMATIONS LIST
FUNCTIONS, EFFECTS AND ANIMATIONS CREATED WITH THE ADDITIONAL JAVASCRIPT & CSS
WOW.JS & ANIMATE.CSS REVEAL ANIMATIONS
*Reload page to see the animation
Graphic Styles Name
All styles name start with the word ‘wow’, for example ‘wow-fadeIn’.
How to Use
Fade In Up
Reveal Animation
Animation Style in
Graphic Styles Panel
HOVER.CSS ROLLOVER EFFECTS
'Shrink on Rollover' Effects
*Hover on button to see the effect
Graphic Styles Name
All styles names start with the word ‘hvr’, for example ‘hvr-shrink’.
How to Use
Hover Style in
Graphic Styles Panel
Shrink
Hover Effects
NUMBER COUNTER ANIMATION
Graphic Styles Name
The style name is 'counter'.
How to Use
Number with Counting Up Animation
Counter Function Style in
Graphic Styles Panel
PROGRESS BARS
GRAPHIC DESIGN
WEB DESIGN
VIDEO EDITING
PHOTOGRAPHY
WEB DEVELOPMENT
GRAPHIC DESIGN
3D DESIGN
VIDEO PRESENTATION
Animated Bar Charts
Implementation
The bar chart elements are animated by assigning them with the Reveal Animation. To prevent the elements from being seen outside of their transparent boundary box, they have been placed inside a transparent State Button that has been assigned with the style 'overflowBox'. This particular style will make sure that even though the animations start from outside of the box, the elements will only be seen once they have reached the inner part of the box.
How to Use
Style for the Container Box
Container Box Created from the State Button Widget
Different Reveal Animations Styles Applied on Each Bar Chart Elements
All Bar Chart Elements are Placed Inside a Special Container Box
fadeInUp
fadeInUpDelay200ms
fadeInUpDelay600ms
fadeInUpDelay400ms
fadeInUpDelay800ms
PARALLAX SCROLLING EFFECTS ON 'FIXED WIDTH' PAGE LAYOUT
PAGE SETUP (Prerequisite)
MOTION SCROLL EFFECT ON OBJECTS
MOTION SCROLL EFFECT ON IMAGE INSIDE A RECTANGLE
View this LINK to learn how to fill a rectangle with an image.
OPACITY SCROLL EFFECT
MOTION
BRANDING
PHOTO
MOTION WITH OPACITY SCROLL EFFECT
All content © Tersus, 2019. All rights reserved.