Where I have to put prepared HTML, CSS and JS?

#1

Hi guys!
I'm not familiar with the coding thats why I'm interested of Hype! But I want to make more complicated things and it seems no other way to do it without any knowledge of coding I guess... For example:
I tried to recreate this feature: https://codepen.io/tutsplus/pen/QEyEQv
OK, but I couldn't. I found the "Edit Head HTML" button in "Document" tab but I can't find where to put CSS code? I learned how to make JavaScript Function and I putted there the code from the example but the final result didn't works.

This is my file: Archive.zip (14.6 KB)
What am I doing wrong?
Thank you for your help

#2

this example makes use of the scrollMagic-library mentioned in your link.
scrollMagic_example.hype.zip (12.1 KB)

just scroll up... it's a very basic example.

please look up https://scrollmagic.io/ for further info and API of scrollMagic.

Note: as my example seems to work in a first short test you may run into trouble cause Hypes runtime tries to hold control for its elements positions. scrollMagic may interfer here ...

Embedding ScrollTrigger plugin
Is it possible to use scrollmagic.js for sticky animation?
Embedding ScrollTrigger plugin
#3

Thank you for the rapid response!
Can I put "center" on the screen instead of "offset: 926"?
Another question is what if I want a different variation and I don't want to hang the image somewhere, but I want to start the sprite's animation when it appears on the screen below and plays while moving up until it hides on top of the screen?

1 Like
#4

please have a deeper look in the documentation and examples of https://scrollmagic.io/

2 Likes
#5

Thanks a lot!

#6

@h_classen is our forum bot. He loves hearts, it will keep him going. We thank you. :heart:

2 Likes
#7

ah no ... the currency should be show initiative, not hearts :slight_smile:

1 Like
#8

which emoji is that? :muscle: or :wave: or :woman_shrugging:

#9

no emoji, just some own brain work and commitment of a questioner :slight_smile:

3 Likes
#10

you could use window.innerHeight/2

why not just separate the controlled element from the animation to use the progress there ...