Streaming live at 10am (PST)

Scrollwheel -> Video playback controls!


#1

Is there a way to control a video’s playback using the scrollwheel like Apple constantly does on their website (has for years) like the new iPhone Xs page: (see attached GIF)

appl_watch

I don’t know if there’s a way to do this yet in Webflow, but for such an amazing effect, I’m surprised more people don’t want to see this kind of tool in Webflow natively.

If there is a way to do this with embedded code, please let me know!

Please also vote for this feature if you want this natively.
https://wishlist.webflow.com/ideas/WEBFLOW-I-567


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Your example is not video but png/jpegs with animation on scroll.

The iphone for example: https://www.apple.com/v/iphone-xs/a/images/overview/fit_finish_gold_large.png

The most famous library for this effects is:

But you should know well CSS and JS for this (Advanced).

interaction 2.0

By webflow interaction 2.0 - you could make animation on a scroll - scrollmagic with more options (This is a specific framework for scroll animations - huge API) - but also in webflow you could get great results.

Start her:

I don’t think there is any workshop -or- full course about this specific issue - but again the sky is the limit :slight_smile: start to play with interaction 2.0

Basic example: horizontal-movement-on-scroll-interactions


#3

Whatever the case, the technique I’m after uses video and Apple’s doing it for years. Neither Interaction 2.0 or ScrollMagic does this.

Examples:


New Apple Watch
appl_watch

Example 2 from the same page
apple_watch_2


Mac Pro sequence controlled by scrolling — embedded video right from the page:


iPad sequence playback when scrolling into view:
ipad

Like Interaction 2.0 triggers, but with video.


#4

I’m not the one who replied earlier, but keep in mind you specifically referenced an example from Apple that uses a more straightforward scrolling animation and not others that use the effect you’re wanting. @Siton_Systems was just trying to help with some extra information, and I doubt your response makes other members of the community want to offer assistance.

In regards to your question, this isn’t currently possible with interactions within Webflow but a quick search came up with a working example on CodePen that should get you going.

Once you get something created using the example above, you can update the thread with your read-only link so others may help you more easily. Also, just as a reminder, most of the folks that are going to give you a reply on here aren’t getting paid to do so.

Happy designing :wink:


#5

Yes, I’m sorry. The thing is I’ve asked about this before (and provided working video examples) and people keep acting like this isn’t a thing and the same libraries that do PNG animation would work. I was pretty clear what I was looking for and there’s examples all over Apple’s website. My bad for choosing one didn’t happen to use video.

Thanks for the CodePen link, but I’m not quite sure how to take that and use it on a Webflow site. Can you please provide some instructions?


#6

I can’t speak for the responses previously, but I hope mine brought a bit of clarity as to the limitations of Webflow’s (extremely powerful) tool.

I admittedly didn’t look too much into the code so I won’t be much help now (I’m writing this on my phone while enjoying a drink at a local tap house) but there are some other links that came up when I searched for “scroll video scrubbing” that may get you in the right direction. I’m sure you’ve done so already, but the forum may have some older threads discussing this same topic, so those can be useful as well.

Get something together in a new project and when you get to a point that you’re stumped, just reply with a read-only link. I’m not really a custom code fella, but with all of that available I (or another member) will be able to give you some more appropriate help.


#7

To clarify, you want the video to play from the beginning each time it scrolls into view?


#8

Nice. The reason you dont find this trick a lot - creating videos like this (3d, after and so on) Requires a lot of investment. Change video timing on scroll is the easy part her :slight_smile:

On stackoverflow you find a lot of q about this issue.


#9

Going for scrolling video like this: http://codepen.io/anon/pen/mJwbK

If I also had the option of controlling playback via the div entering the view, (like Interaction 2.0 triggers), then yes that would be cool too.


#10

Well, I’m a 3D artist/motion designer, so it’s a perfect combination. :slight_smile:


#11

With the demo you provided, best bet is to integrate that code into your Webflow project. It should be straightforward…