I use Principle primarily to prototype “scrollytelling”-type web sites, where animations are controlled both via scroll position and at certain trigger points. Right now there doesn’t seem to be a way to replicate the behavior common to these web sites where once you reach a certain point in your scroll, an animation is triggered. I think this is really important behavior to have in a tool such as this.
Have you searched the Docs and Knowledge base?
Principle Version:
macOS Version:
Description of what you need help with:
Steps to reproduce the behavior:
1.
2.
3.
.prd file link (we really need this to fix almost any problem):
Screenshots:
Hey, I found a work around a while ago which may solve your issue using the hover event interaction. (It’ll only work on devices with cursor support)
Instructions:
Within your Scroll group, create a rectangle the width of your scroll window and position it overtop of the video you want to play. Set the height relative to where you want the video to play on the page. (I tend to set it a few 100px above the video ) Set rectangle’s color opacity to zero, (this allows the rectangle to be “touchable” without being visible)
Next, create a component containing both the video and rectangle. Within the component, duplicate the Artboard. On the first Artboard, set the video playback status to “Play once” and “Paused”. On the second Artboard set it to “Play once” and “Playing”.
On the first Artboard, select the rectangle and add a “Hover Inside” event and connect it to the second Artboard.
Return to the parent window and test if you like the position where the hover event triggers the playback status.
This should trigger the video to play when the user reaches a certain position.
If you want the user to be able to replay the video, you could add another set of Artboards with text or a replay button and connect it to another artboard with a playing status.
