JMPv3.0 module | onscroll pinunpin 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 - pin unpin

Welcome to this tutorial for jor_aniMateMASTERPACKv3.0 ...

In this tutorial we will use module | onscroll to create a pin - unpin 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 scrolls up pins, unpins and scrolls up out the viewport

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

animation 1 - pin - position

"Module | onscroll repositions each object into a new fixed window position"!
The position properties are the first inputs we will set for our pin 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 scroll upward

The top start input starts where we positioned the object in Webbuilder with the same command self

The top end input is set at top=80 that's where we want the Layer to stay pinned, 80px from the top

That's all the position input we have to set

animation 1 - pin - duration

We also have to set the duration of the animation, which sets the speed of motion for our scrolled object

1 | scroll duration = com:staticT=0

To create a controlled speed of motion we use the command static
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 1 - pin - scroll start

Last we need to set when the animation should start, in this tutorial we want it to start from the get go

1 | scroll start = 0

We simply set the scroll start to 0

That's all the inputs we have to set for this 1st animation, our Layer scrolls up and pins at 80px from the top

animation 2 - unpin - position

Now we need to unpin the Layer 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 unpin and 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 - unpin - duration

For the scroll duration we use the same command as used in the 1st animation, the command static

2 | scroll duration = com:staticT=0

That's all the duration input we have to set

animation 2 - unpin - scroll delay

The 2nd, 3th and 4th animation in module | onscroll do not have a scroll start input, instead it sets a delay
In this tutorial we are going to use a mark command to activate the 2nd animation

2 | scroll delay = com:mark=Shape1/0

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

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

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

to calculate the activation time

When the top of both object are equal in position the 2nd animation activates

In Demo 1 the white Shape object to the left is the mark

That's all the inputs we have to set for this 2nd animation, our Layer unpins and scrolls out of the viewport

That's the full pin unpin animation completed, a vertical pin unpin upward

Module | onscroll can of course be used in a myriad of other setups, it's a tool first and foremost
Let's do a pin unpin variation
Instead of the Layer scrolling upward, let's make it scroll downward out of the viewport
We need to change the 2nd animation for this ...

animation 2 - unpin variation 1 - position

Instead of using the command top=out we use bottom=out

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

animation 2 - unpin variation 1 - duration

We also need to change the speed of the object traveling
We want to make sure the object completes it's animation before the page reaches it's end
We could simply input a low duration input, something like ...

2 | scroll duration = 300

That's the full pin unpin variation 1 animation completed, a vertical pin unpin downward

But in this tutorial we will use a more sophisticated method, we will use the command markenter
The duration of the animation, the speed in which the object travels is calculated between
the mark top position and it's point of entry (mark viewport entry)

2 | scroll duration = com:markenter=Text1/300

The mark used here is the id Text1

In Demo 2 that's the id of the WB Text object at the bottom, written as - "THE END"

The top position of that object and it's point of entry becomes the duration

We also have set an offset of 300 for the mark, because the Text object is around 400px in height

This is optional, we have around 400px in scroll time to play with for our Text1 object to be full in view

We do this because we want the scrolled object to be out of view before the Text1 object is in view

Let's do one more variation ... let's create a horizontal unpin
Instead of the Layer scrolling vertical, let's make it scroll horizontal to the right out of the viewport
We again need to change the 2nd animation for this ...

animation 2 - unpin variation 2 - position

This time we want the left position to change and the top position to remain the same

2 | position | LEFT end = com:right=out
2 | position | TOP end = com:top=80

To animate our Layer out to the right of the viewport we use the command right=out
The top position however we want to stay at it's pinned position, which was 80px from the top
So we use the command top=80

animation 2 - unpin variation 2 - duration

We use the same duration setup as in variation 1 to animate our Layer out of view before page end

2 | scroll duration = com:markenter=Text1/300

That's the full pin unpin variation 2 animation completed, a vertical pin horizontal unpin to the right

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

2 | fade mode = fadeout

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

module | onscroll - pin unpin - tutorial

Tutorial 1

Vertical pin - unpin

Tutorial 2

Vertical pin - unpin - variation 1

Vertical pin - unpin - variation 2

Tutorial 3

TUTORIAL
jor_aniMateMASTERPACKv3.0 b5
module | onscroll

Goto Live Demo 2

Level: Moderate

Goto Live Demo 3

SEE LIVE DEMO 1

SEE LIVE DEMO 2

SEE LIVE DEMO 3

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