Using Hype Sticky Scroll with symbols

1

Should one expect StickyScroll to trigger timeline actions?
I don't want all animations to be controlled by the scroll position. Some should be in separate timelines, start at a certain position and play at defined duration, regardless of the scroll position.

Screenshot 2024-03-11 at 11.09.27
Screenshot 2024-03-11 at 11.09.271638×954 153 KB

2

As the main timeline is in each scene is controlled, it most likely will not trigger timeline actions as you can just skip past them, so refreain from using them there. It only controls the main timelines.

3

Alright, discovered that.
Would be nice if it worked - timeline actions got triggered - and parallel timelines played independently from the scroll control. :slight_smile:

4

Not really up to me as I use the API to jump to a specific time index in the timeline. Maybe all intermediary key frames could be called in short iteration, but would be a workaround hack.

You can use symbol timelines. I added a demo to Scene A in the above example.

1 Like
5

That was interesting! Will experiment with symbols without an action that says start timeline.

Have decided to go with Sticky Scroll and not use Scroll Magic (or Waypoints) for a current project. It is in a pretty good shape now with Sticky Scroll :slight_smile:

1 Like
6

Got to ask a few more questions Max… (feels like I am spamming you here :slight_smile:

What is it that triggers the symbol "SymbolIndependent" to play?
You have put this symbol outside the scene, why is that?

Is this tall white top area in your example and the CSS with overscroll-behaviour-y, wrapper… needed in order to make it work?

Can't make "SymbolIndependent" to play in my files. And sometimes it doesn't start to play in your example file, tested on latest Safari and Chrome on Mac.

7
  1. SymbolIndependent is activated when the symbol is loaded (check inside the symbol, Symbol tab).
  2. I placed the symbol there simply because there was no space on the stage. There was no specific reason. For example, it uses 100% height... regardless.
  3. No, the top area is only there for demonstration purposes. Simply remove the CSS that generates it from the Head HTML... overscroll-y is used to prevent rubber banding (look up that term if you are unfamiliar with it).
  4. SymbolIndependent only runs when the symbol is loaded... therefore, it does not retrigger when scrolled off the screen and revisited (such as returning to the top white area). If you want it to retrigger, you can use the in-viewport events from Hype, I suppose.
3 Likes
8

Thanks a lot Max!! :slight_smile:

1 Like