repeat animation and stop on different frame

1,709 views
Skip to first unread message

simon...@gmail.com

unread,
Apr 19, 2017, 11:54:19 AM4/19/17
to Google Web Designer beta
Hello it is possible to play the animation three times then stop on a different frame?

I am using the events as GotoAndPlayNTime = times 3 but I need it to stop somewhere else but if I add in a pause before it then the repeat doesnt work

Thanks
Simon

San Khong

unread,
Apr 19, 2017, 12:59:57 PM4/19/17
to Google Web Designer beta
Hi Simon,

It's better to loop the animation 3 times and then go to another page so you don't need to use pause as css pause is not working properly on iOS. Here is what you can do:

Add the event to loop animation 3 times:
    1. Right-click the event track where you want the animation to start looping and select Add label... from the pop-up menu.
    2. Enter a label name such as loopStart in the pop-up dialog.
    3. Press Enter.
  1. Right-click the event track where you want the animation loop to end, and select Add event from the pop-up menu
  2. Double-click the event marker and set the timeline looping event like this:
    • Target - Choose the page the animation is on (set automatically).
    • Event - Choose Timeline > event-1 (set automatically).
    • Action - Choose:
      • Timeline > gotoAndPlayNTimes (to choose a certain number of loops).
    • Receiver - Choose the page.
    • Configuration - Choose the label (for example, loopStart) and set the number of times you want to repeat.
  3. Add another page to go to after animation is done looping 3 times.
Double click on the event at the last keyframe to add the following custom action for counter:
if (counter < 2) {
  counter++
} else {
  gwd.actions.gwdPagedeck.goToPage('pagedeck', 'page1_1', 'none', 1000, 'linear', 'top');
}

Now go to code view to define the variable counter and set it to 0, insert it right above the custom action function:


I also attached the author file you can look at the example.


If you really want it to go to a label in the same page and stop (disregard of iOS), you use this instead of gotoPage in the custom actions

gwd.actions.timeline.gotoAndPause('page1', 'stop'); 

where 'stop' is the label on the timeline where you want it to go to.


Hope it helps,

San

Google Web Designer team



play3times.html
Reply all
Reply to author
Forward
0 new messages