JMPv3.0 module | onscroll slotin Tutorial

jorextensions.com free extensions for WYSIWYG Webbuilder
jordan (6j6)

tutorial for module | onscroll
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com

TUTORIAL module | onscroll - slot in

Welcome to this tutorial for jor_aniMateMASTERPACKv3.0 ...

In this tutorial we will use module | onscroll to create a slot in effect
Module | onscroll can be found under the section 04. MODULES SECONDARY 2 in the extension

THE SELECTOR ?

To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?

Module | onscroll allows many different input types ...

But the easiest method and the one used in this tutorial are the predefined commands

More information on module | onscroll predefined commands can be found in the Online Manual

In this tutorial we are going to create a WB Layer that slots in from the top and scrolls back out the top

Module | onscroll allows 4 animations per object per page
For our vertical slot in Layer we only need 2 animations ... Let's go ...

animation 1 - slot in - position

"Module | onscroll repositions each object into a new fixed window position"!
The position properties are the first inputs we will set for our slot in Layer

The self command used here is an easy method of setting the position of our scrolled object in a

visual manner, it uses the position of our Layer as-it-is positioned in Webbuilder

We only want to create a vertical scrolling Layer in this tutorial ... so ...

The left position of the object therefore does not change, it remains in the same position from start to end

The top position however does change, we want it to slot in downward

The top start input starts out of view from the top, we use the command top=out for this

The top end input is set at top=200 that's where we want the Layer to slot in, at 200px from the top

That's all the position input we have to set

animation 1 - slot in - duration

For our slot in effect to work we need the scrolled object to reach it's destination at an exact controlled timing
In this tutorial we will use a mark command for this, the mark command markE

1 | scroll duration = com:markE=Shape1/-200

animation 1 - slot in - scroll start

Last we need to set when the animation should start, this also requires an exact controlled timing
We will use the same command markE on the scroll start for this

1 | scroll start = com:markE=Shape1/-400

We target the same object Shape1, but instead of setting an offset of -200 we set an offset of -400

If we use the same object as mark in duration and scroll start they can not both return the same value

If we would use on offset of -200 for the scroll start there would be no duration time

The duration would become zero, our scrolled object would simply jump instant to it's end position

In this instance the scroll start mark offset in essence becomes the duration time by adding an extra 200px

That's all the inputs we have to set for this 1st animation, our Layer slots in from the top at 200px from the top

animation 2 - upward - position

Now we need to make the Layer scroll upward out of the viewport with a 2nd animation ...
Only the 1st animation has a start and end position input in module | onscroll
The 2nd, 3th and 4th animation only have an end position as input

2 | position | LEFT end = com:left=self
2 | position | TOP end = com:top=out

The left position again remains the same, we want a vertical scroll, so we use the same command self
We want the object to scroll upward out of the viewport
We use the command top=out on the top position for this, the object scrolls up out the viewport

That's all the position input we have to set

animation 2 - upward - duration

We want the Layer to scroll upward with the same speed of the page, for this we use the command static

2 | scroll duration = com:staticT=0

The static command consists of the staticT and the staticL command, T for Top and L for Left
The staticT is used for vertical animation staticL for horizontal animation
Here we want to create a controlled vertical scrolling Layer, so we use the staticT command
The object scrolls equal to the speed of the page

That's all the duration input we have to set

animation 2 - upward - scroll delay

Last we need to set how long the 2nd animation should wait, delay, before executing it's animation
The 2nd, 3th and 4th animation in module | onscroll do not have a scroll start input, instead it sets a delay

2 | scroll delay = 0

In this tutorial we do not want a delay we want the object to scroll upward instant
We simply set the delay to 0

That's all the inputs we have to set for this 2nd animation, our Layer slots in and scroll upward out

Let's do a creative variation on this slot in technique
Instead of using a Layer let's use an Image, we'll cut the Image in 2 parts and make them slot in together
We need to change the 1st animation for this ...

animation 1 - slot in variation - position

Instead of the top position changing we want the left position to change, a horizontal animation

We have 2 Images, one slots in from the left the other from the right

So we use the command left=out as start position for the 1st Image and right=out for the 2nd Image

The Images we use in this tutorial are larger in height then the Layer from Tutorial 1 , 520px in height

So we want them to slot in a bit earlier then the Layer, we let them slot in on 150px from the top

We use the command top=150

That's all the position input we have to set

animation 1 - slot in variation - duration

We use the same duration setup as in the first tutorial
But we need to change the offsets as the height of the Images differ from the Layer from the first tutorial

1 | scroll duration = com:markE=Shape1/-520

That's the full slot in variation animation completed, a horizontal slot in scroll upward out

Let's add some extra drama, we set the fade mode property to fadein

1 | fade mode = fadein

What is jor_aniMateMASTERPACKv3.0 ?

jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless

Download the demo's of the above tutorials here as WB project ...

module | onscroll is a module of jor_aniMateMASTERPACKv3.0 build 5 • 2009 - 2015

more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)

Hope you found these tutorials informative and useful ...
Module | onscroll can be used in countless other setups and methods
These demo's should be a good start point to experiment with

Online Manual
Online Manual - module | onscroll
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?

Module | onscroll full demo
WYSIWYG Webbuilder Forum Topic JMPv3.0

More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com

Back To Top

The markE command allows us to use an absolute positioned object as a trigger

The markE is set by the id of an object, in this tutorial we use a WB Shape object with the id Shape1

The markE command uses the top position of the mark and the top (end) position of the scrolled object

to calculate the duration

That's the full slot in animation completed, a vertical slot in scroll upward out

So, we have our exact controlled timing, but we need to take one more step

Because we don't want our objects to be equal in position for this effect

The Layer, our scrolled object, should slot in on top of Shape1

"When the top of both object are equal in position the scroll animation is at it's end position"

We have set the top position of our scrolled object in it's end state at 200px from the top

So this command says:

"If Shape1 reaches the top position of 200px, the scrolled object must be in it's end position"

For the Layer to slot in on top of Shape1 we need to direct it beneath the Layer

The Layer in this tutorial is 200px in height, so the mark, Shape1 needs to be directed to minus 200

We do that by setting an offset after the slash on the mark of -200

That's all the duration input we have to set

Image 1

Image 2

The Images are 520px in height so the offset becomes -520

animation 1 - slot in variation - scroll start

We also need to change the offsets of the scroll start for the same reason as the duration input
We add an extra 200px making an offset of -720

1 | scroll duration = com:markE=Shape1/-720

Level: Moderate

module | onscroll - slot in - tutorial

Tutorial 1

slot in

Tutorial 2

slot in - variation

TUTORIAL
jor_aniMateMASTERPACKv3.0 b5
module | onscroll

Goto Live Demo 2

SEE LIVE DEMO 1

SEE LIVE DEMO 2

DOWNLOAD DEMOS

Comments, feedback etc regarding this tutorial please post them at the WB Forum Topic JMPv3.0 ...

jordan (6j6)

IMPORTANT: PREDEFINED COMMAND SELF VS RWD ?

In this Tutorial the predefined command self is used to position objects

It is IMPORTANT to note NOT to use the command self in combination with RWD design

The command self is not dynamic, it's point of entry (breakpoint) becomes it's point of origin

Recommended: with RWD design it is better/easier to build onscroll animator animation from the center

Use ie. the predefined command capital C