Transition text while using sticky javascript

1

Hey guys, like the tumult forum itself, transition effect when scrolling.mp4 (1020.2 KB) I am trying to apply the transition effect on text and/ or images while using the sticky js, as the elements bump to the top.

Thx

2

lock and unlock plus fix an element is always tricky within hype …
but if using just fixed in combination playing timelines i guess it works just fine …
headerswap and footer fixed

2 Likes
3

Mindblown! Almost exactly what I want to do.
Now to just figure it out…
Thx for posting @h_classen!

4

fixie.hype.zip (2.6 MB)

2 Likes
5

Thx to you for your courtesy,
This will keep me busy for a pretty minute @h_classen! Hahahahaha

Kind Regards,
Marc

6

I really want this too :stuck_out_tongue:

BUT!
I can´t open the file, it says you used a newer version of Hype, but when I search for updates I have the latest one. What could be wrong here?

(running latest OSX)

1 Like
7

Cool technique!

I moved this into the beta category since it uses features only in the beta and I don’t want anyone feeling left out.

(But I’ll move it out of the beta once 3.5 is released!)

1 Like
8

sry my regular version has been replaced while updating the last beta … which doesn’t matter though :slight_smile:

9

Thanks Hans Gerd !
Opens a lot of possibilities :slight_smile:

10

I just came across to this and it works amazing, but now I have a question, is it possible to use a class instead of and ID?

Using hypeDocument.getElementsByClassName(’.footer’); is not working for me :frowning:

11

Try

document.getElementsByClassName('footer');

Remember it will return an Array of results not an element

12

Thanks but it does the same as using hypeDocument, the footer is “sticky” but does not appear on the bottom of the window.

13

If you can post the project it will help take the guess work out of what you are doing…

14

Sorry I had to clean up and it took some time, but here it is:

Disumel_5.hype.zip (2.1 MB)

The reason I want to use classes is because the footer will appear in multiple scenes and using ID is quite problematic for that purpose.

15

Gosh… where to start…

There are few errors here…

Firstly you need to look at the code snippet I posted and use that. Hype will not understand the getElementsByClassName call. So you have to use document

The return value from the classname will be an Array not a element because it is getElements, plural
You will need to either specify which item in the array you want by index i.e

document.getElementsByClassName('footer')[0];

[0] indicates the first item

Or iterate over the array.

Next you do not need to specify a class by using the period ". " with the class name.
I.e should be document.getElementsByClassName('footer')[0];

Not document.getElementsByClassName('.footer')[0];

You normally only need to do that with jQuery

You are also missing the closing function bracket in the setFooter() function.

There may be more

2 Likes
16

The [0] at the end did it! Is working now! I can’t thank you enough for your time. And yeah, the missing bracket is a typo I forgot to fix before saving the file, but yeah I fixed that too and everything is working beautifully.

Each time I learn a lot with your comments.

1 Like