ANIMATE.CSS LIBRARY REMOVED ?
The previous included CSS3 effect library animate.css has been removed from JMPv3.0 b5.6
The library however is still available as it's converted and modified into a new method - (=jquery.keyframes.mod)
This new method adds some powerful new options
PROS:
• the effect is only loaded from the library if the effect is actually used
• the library is modified to use 2d instead of 3d effects which gives the effects greater cross-browser support
• custom fx can be added and maintained per page
The previous included CSS3 effect library animate.css has been removed from JMPv3.0 b5.6
The library however is still available as it's converted and modified into a new method - (=jquery.keyframes.mod)
This new method adds some powerful new options
PROS:
• the effect is only loaded from the library if the effect is actually used
• the library is modified to use 2d instead of 3d effects which gives the effects greater cross-browser support
• custom fx can be added and maintained per page
EASY TOOLS - CUSTOM FX
CUSTOM FX - CSS
Creating a custom fx requires some knowledge of CSS properties
Most of the time a custom fx is build around the CSS3 transform properties - scale, skew, rotate and translate - (addit. opacity)
More info on CSS3 transform properties see - here
Creating a custom fx requires some knowledge of CSS properties
Most of the time a custom fx is build around the CSS3 transform properties - scale, skew, rotate and translate - (addit. opacity)
More info on CSS3 transform properties see - here
CUSTOM FX - KEYFRAMES
The custom fx is entered by adding keyframes, a timeline in percentage in which the transition occurs
A SIMPLE EXAMPLE:
{
name: 'keyframe-myEffect',
'0%': {
'transform':'scale(1, 1)',
'opacity':'0'
},
'50%': {
'transform':'scale(1.5, 1.5)',
'opacity':'1'
},
'100%': {
'transform':'scale(1, 1)'
}
}
Here a transform scale keyframe animation is created
The object fades and scales in at 50% and ends in it's original state at 100%
IMPORTANT - THE EFFECT NAME
The name we give this keyframe animation is keyframe-myEffect - it is required to add the prefix keyframe- to the effect name
- The effect will not execute without the prefix added !
We can add as many properties as we like and build the effect that we require
The custom fx is entered by adding keyframes, a timeline in percentage in which the transition occurs
A SIMPLE EXAMPLE:
{
name: 'keyframe-myEffect',
'0%': {
'transform':'scale(1, 1)',
'opacity':'0'
},
'50%': {
'transform':'scale(1.5, 1.5)',
'opacity':'1'
},
'100%': {
'transform':'scale(1, 1)'
}
}
Here a transform scale keyframe animation is created
The object fades and scales in at 50% and ends in it's original state at 100%
IMPORTANT - THE EFFECT NAME
The name we give this keyframe animation is keyframe-myEffect - it is required to add the prefix keyframe- to the effect name
- The effect will not execute without the prefix added !
We can add as many properties as we like and build the effect that we require
EXPLAIN ?
easy tools | custom fx
Easy tools | custom fx can be used to create custom fx for module | onscroll (enter) and module | OnLoad (keyframe)
easy tools | custom fx
Easy tools | custom fx can be used to create custom fx for module | onscroll (enter) and module | OnLoad (keyframe)
ETOOL
Onscroll Enter Custom Fx
OnLoad CSS3 Keyframe Custom Fx
OnLoad CSS3 Keyframe Custom Fx
CUSTOM FX - MULTIPLE ENTRIES
We can use a single entry per custom fx , but we can also use a single instance to add multiple custom fx
AN EXAMPLE:
{
name: 'keyframe-myEffect1',
'0%': {
properties
},
'100%': {
properties
}
}, <-------------------------------- comma between
{
name: 'keyframe-myEffect2',
'0%': {
properties
},
'100%': {
properties
}
}
We can use a single entry per custom fx , but we can also use a single instance to add multiple custom fx
AN EXAMPLE:
{
name: 'keyframe-myEffect1',
'0%': {
properties
},
'100%': {
properties
}
}, <-------------------------------- comma between
{
name: 'keyframe-myEffect2',
'0%': {
properties
},
'100%': {
properties
}
}
CUSTOM FX - MEDIA RULE
Another great option we can use in a custom fx is a media rule
AN EXAMPLE:
{
name: 'keyframe-myEffect',
media: 'screen and (max-width: 720px)', <----- only activate fx if window
'0%': { is smaller then 720px
properties
},
'100%': {
properties
}
}
In combination with the previous mentioned multiple entries option this can be used to great creative purpose
With media rules we can even use the same name and build complete different effects by using different media queries
More info on CSS media rules see - here
Another great option we can use in a custom fx is a media rule
AN EXAMPLE:
{
name: 'keyframe-myEffect',
media: 'screen and (max-width: 720px)', <----- only activate fx if window
'0%': { is smaller then 720px
properties
},
'100%': {
properties
}
}
In combination with the previous mentioned multiple entries option this can be used to great creative purpose
With media rules we can even use the same name and build complete different effects by using different media queries
More info on CSS media rules see - here
The easy tools | custom fx option is a powerful new tool at our disposal !
• vendor-prefixing is handled internal - we can simply focus on building the effect
• the effect is stored on the page - we can use the same effect on any other page and easily make alterations per page
• vendor-prefixing is handled internal - we can simply focus on building the effect
• the effect is stored on the page - we can use the same effect on any other page and easily make alterations per page
__________________________________________________________________________
more info on easy tools | custom fx see here Overview Enter
more info on easy tools | custom fx see here Overview OnLoad
credits: krazyjakee
more info on easy tools | custom fx see here Overview Enter
more info on easy tools | custom fx see here Overview OnLoad
credits: krazyjakee
b5.6
advanced!
EXPERIMENT:
- copy/paste the code of A SIMPLE EXAMPLE in the easy tools | custom fx property
- now the effect name used can be used as an effect - NOTE: always add the prefix keyframe- to the effect name !
- copy/paste the code of A SIMPLE EXAMPLE in the easy tools | custom fx property
- now the effect name used can be used as an effect - NOTE: always add the prefix keyframe- to the effect name !
NEW ANIMATE.CSS LIBRARY METHOD VS PRE JMPv3.0 b5.6 ?
This new method requires 2 adjustments to be made to be compatible with previous saved projects
- This note applies to module | onscroll - mode enter
• Reselect the effect, - the effect names have been changed
• A duration can now be set for the effect, - to match previous saved projects set the duration property to 1000
This new method requires 2 adjustments to be made to be compatible with previous saved projects
- This note applies to module | onscroll - mode enter
• Reselect the effect, - the effect names have been changed
• A duration can now be set for the effect, - to match previous saved projects set the duration property to 1000
5
RECOMMENDED:
The internal animate.css library effects are only loaded if the effect is actually used
This does not apply to custom added fx, - custom fx are always loaded regardless the usage of the effect
Recommended: only add a custom fx if it actually is used !
The internal animate.css library effects are only loaded if the effect is actually used
This does not apply to custom added fx, - custom fx are always loaded regardless the usage of the effect
Recommended: only add a custom fx if it actually is used !