Skip to main content
Participant
November 23, 2016
Answered

Start Animation (Animate CC) only when the canvas is visible

  • November 23, 2016
  • 1 reply
  • 1974 views

ENGLISH

Hello everyone (sorry for my English it is Google that takes care of it)

I have an animation installed on a long HTML page. But this annimation is not visible at the outset. I want it to launch only when it becomes visible, because when scrolling the user sees only the end.

On Twiiter I was given unsolution, but this does not match my request.

http://stackoverflow.com/questions/10405062/html5-animation-play-when-scrolled-to


FRANCAIS

Bonjour à tous (pardon pour mon anglais c'est Google qui s'en occupe)

J'ai une animation installée sur une longue page HTML. Mais cette annimation n'est pas visible au départ. J'aimerai qu'elle se lance uniquement quand elle devient visible, car au moment de scroller l'internaute ne voit que la fin.

Sur Twiiter on m'a donné unsolution, mais ce la ne correspond pas avec ma demande.

http://stackoverflow.com/questions/10405062/html5-animation-play-when-scrolled-to

This topic has been closed for replies.
Correct answer UDESCO

You'll then have to script the behavior externally.

This might be of help - html - How to tell if a DOM element is visible in the current viewport? - Stack Overflow

First you need to turn off the autoplay using exportRoot.stop() and then play the animation only when it comes in view(described in the link above),.

1 reply

UDESCO
Adobe Employee
Adobe Employee
November 23, 2016

There is a quick and easy way of controlling such settings using Animate & Muse.

1. Export your Animation as an OAM file or upload the animation in CC Libraries,.

2. Open your website in Muse.

3. Import the OAM file or use the Animation from CC libraries in Muse. Place it at the appropriate position.

4. Open Scroll Effects Panel in Muse -> goto Animation tab -> select Animation checkbox and Autoplay selected.

5. Preview the webpage in browser and it should play only when you scroll down and canvas comes in view.

Participant
November 23, 2016

Thinks a lot. But I don't want a website made with Muse.
In fact my site is finished it is on Wordpress built in PHP.

UDESCO
Adobe Employee
UDESCOCorrect answer
Adobe Employee
November 23, 2016

You'll then have to script the behavior externally.

This might be of help - html - How to tell if a DOM element is visible in the current viewport? - Stack Overflow

First you need to turn off the autoplay using exportRoot.stop() and then play the animation only when it comes in view(described in the link above),.