Detect and start animation at the point of where the Ad is


(Pete) #1

Hello everyone. How does one set a function to start animating a banner or presentation at the specific point in time like at a point where you see the banner only then start the animation.

I know its possible to do based window scroll value via javascript but im looking for a specific one where if banner is in focus play the animation. Can someone give me a Hype example?

Currently some of our affiliates use Hype ads that start animating by themselves some are at the middle some at the bottom of the page and until they scroll down the animation is done playing.


#2

@petester

Are You referring to the “On Enter Viewport” action?

In this demo the appearance of a rectangle (containing a video) will trigger the video to begin playing when the rectangle appears in the viewport. This trigger could be an animation instead of a video of course - but with the video I get to demo a Hype feature request I made a while ago showing sound controlling animations (just to keep @daniel & @jonathan’s mind fresh on the possibilities :sunglasses:).

ViewportTrigger.hype.zip (2.2 MB)

Online Demo here.

Note: I also set the video to pause if it’s not finished playing when it leaves the viewport - using the “On Exit Viewport” action.


#3

We take feature requests via Video demos the most seriously :slight_smile:

For this viewport action method that Jim demoed to work, the ads would need to be embedded normally, not within an iframe. The iframe doesn’t have information about where it is on the page.


(Pete) #4

Daniel good to see you here :slight_smile: I hope your doing well. As you might have seen when I demoed our Affiliate ad portal we don’t use iframes in our embed code.

Additionally, The demo thats hosted on Business Catalyst doesn’t work for me. When I scroll down I see a black screen I tried clicking on it and waiting for it to load as well still it doesn’t seem to work on both desktop and mobile devices.

I’ll be sending you a msg with an Ad now see if you can figure it out.


(Pete) #5

Hi Jim it didn’t work. When I loaded the [quote=“JimScott, post:2, topic:11868”]
ViewportTrigger.hype.zip (2.2 MB)

Online Demo here.

Note: I also set the video to pause if it’s not finished playing when it leaves the viewport - using the “On Exit Viewport” action.
[/quote]

Jim above doesn’t seem to work it doesn’t play the video.


#6

@petester

Let’s try this version… a “Blue Square” that rotates (720°) when it is in the viewport. When the square is scrolled out of view it resets itself back to 0 degrees.

The main thing I am trying to show is how the mechanism works. I am not conversant with ad creation which might require some adaptation.

The function “rotateSquare()” does all the work. The triggers are “On Enter Viewport” & “On Exit Viewport” in the “Actions Inspector” for the “Blue Square” element.

ViewportTrigger_JHSv2.hype.zip (23.9 KB)


(Hans-Gerd ClaĂźen) #7

what will this mean¿ within viewport? onmouseover¿ ontouchstart¿ …¿

if it’s regarding to position you’ll have to check how your ad-service-provider embeds the ads and they may offer some API to control their ad-container …