Unable to make an event that targets a new page at the end of animation

1,216 views
Skip to first unread message

b...@agentsilverfox.com

unread,
Oct 3, 2013, 6:38:25 PM10/3/13
to gwd...@googlegroups.com
I have theoretically came up with a solution to jump between "scenes" within my banner ad, which is by making multiple pages and linking them in the "Events" tab. There is a way to create an action once the animation is finished, jump to a target page. I have set this event multiple times, but in preview, nothing happens.
Does anyone know how to get this event to work? It seems like I am setting it correctly, but I could be missing something.

I also can't see any of the events that I have already set, the search bar function is useless at this point.

Jason Long

unread,
Oct 3, 2013, 7:19:16 PM10/3/13
to gwd...@googlegroups.com
is this the steps that you set your event? Just so you know, each page should only have only Animation complete event.

Source: page1 => Event: Animation complete => Target: page1 => Action: Go to page => Configuration Page ID:  Page1 1

It would be helpful if you can provide a screenshot of the event dialog.


Thanks,
Jason (GWD team)

b...@agentsilverfox.com

unread,
Oct 4, 2013, 1:23:54 PM10/4/13
to gwd...@googlegroups.com
Yes, that is exactly what I've done. This is the only animation complete event I am trying to have. I am able to link to other pages via tap area, but the animation complete event doesn't seem to be working.
Here's a screenshot:

http://bit.ly/GCEXhv

Also, is there any way to see events that have already been set?

Naresh Rajkumar

unread,
Oct 4, 2013, 1:34:22 PM10/4/13
to gwd...@googlegroups.com
Would you mind sending us your HTML file?
We want to see what the issue is exactly. This should have worked.
Naresh(gwd team)

b...@agentsilverfox.com

unread,
Oct 4, 2013, 2:01:39 PM10/4/13
to gwd...@googlegroups.com
Am I able to attach files in this forum?
Message has been deleted

b...@agentsilverfox.com

unread,
Oct 7, 2013, 1:22:23 PM10/7/13
to gwd...@googlegroups.com
Have you guys checked out the files I sent? Anything working?

Naresh Rajkumar

unread,
Oct 7, 2013, 1:49:23 PM10/7/13
to gwd...@googlegroups.com
Hi
Can you also upload your unpublished HTML source file to that same directory in Bitly.
We can debug that more directly than your published html file.
thanks
-naresh (GWD Team)

Naresh Rajkumar

unread,
Oct 7, 2013, 2:01:27 PM10/7/13
to gwd...@googlegroups.com
Hi,
I looked through your published file.

I did not find a single Event that corresponded to an Animation Completion.
What I found was a ton of Events corresponding to Page Load Complete.

So, I wanted to confirm, did you make a mistake in choosing the right Event from the dialog?
The "Animation Complete" is just below the "Loading Complete" and is the right one you should be choosing.

See the generated code for Events from your HTML file to see what I meant.
Do you see the 'pagepresented", that corresponds to Page "Loading Complete"

When you have an event that corresponds to Animation Complete, you should see a "pagepresenting" (Notice the "ing" instead of "ed".)
I know that words don't look intuitive, but we will fix that

-Naresh (GWD Team)

       
        page1.addEvent(TapArea80, "action", handler0TapArea80ActionEnvironmentExit);
        page1.addEvent(TapArea80_1, "action", handler1TapArea80_1Action$ad$GoToPage);
        page1.addEvent(TapArea80, "action", handler2TapArea80ActionEnvironmentExit);
        page1.addEvent(TapArea80, "action", handler3TapArea80ActionEnvironmentExit);
        page1.addEvent(TapArea80, "action", handler4TapArea80ActionEnvironmentExit);
        page1.addEvent($ad$, "pagepresented", handler5$ad$Pagepresented$ad$GoToPage);
        page1.addEvent($ad$, "pagepresented", handler6$ad$Pagepresented$ad$GoToPage);
        page1.addEvent($ad$, "pagepresented", handler7$ad$Pagepresented$ad$GoToPage);
        page1.addEvent($ad$, "pagepresented", handler8$ad$Pagepresented$ad$GoToPage);
        page1.addEvent($ad$, "pagepresented", handler9$ad$Pagepresented$ad$GoToPage);
        page1_1.addEvent(TapArea80_3, "action", handler10TapArea80_3Action$ad$GoToPage);
        page1_1.addEvent(TapArea80_2, "action", handler11TapArea80_2ActionEnvironmentExit);
        page1_3.addEvent(TapArea80_7, "action", handler12TapArea80_7ActionEnvironmentExit);
        page1_3.addEvent(TapArea80_6, "action", handler13TapArea80_6Action$ad$GoToPage);
        page1_3.addEvent(TapArea80_7, "action", handler14TapArea80_7ActionEnvironmentExit);
        page1_3.addEvent(TapArea80_7, "action", handler15TapArea80_7ActionEnvironmentExit);
        page1_3.addEvent(TapArea80_7, "action", handler16TapArea80_7ActionEnvironmentExit);
        page1_4.addEvent($ad$, "pagepresented", handler17$ad$Pagepresented$ad$GoToPage);
        page1_4.addEvent($ad$, "pagepresented", handler18$ad$Pagepresented$ad$GoToPage);

b...@agentsilverfox.com

unread,
Oct 7, 2013, 2:12:05 PM10/7/13
to gwd...@googlegroups.com
Ok, this is making sense. is it possible for me to just clear all these events, and just make one new one?
I think I got confused because there is no way to see previously set events in the design view mode, so I tried doing it a bunch of times.

Naresh Rajkumar

unread,
Oct 7, 2013, 2:15:48 PM10/7/13
to gwd...@googlegroups.com


On Monday, October 7, 2013 11:12:05 AM UTC-7, b...@agentsilverfox.com wrote:
Ok, this is making sense. is it possible for me to just clear all these events, and just make one new one?

Yes. This is done through the Events Panel.
 
I think I got confused because there is no way to see previously set events in the design view mode, so I tried doing it a bunch of times.
It is visible in the Events Panel.

Click on All Pages in your  Events Panel. And you should see a list of all your Events.
You can click on any Event & then click on the Trash can.

-naresh (GWD team)

b...@agentsilverfox.com

unread,
Oct 7, 2013, 2:48:23 PM10/7/13
to gwd...@googlegroups.com
Hi Naresh,
So I got the events panel to display all my events (other panels were open and hiding the events) and cleared everything to start over. Made new animation complete events, however when in preview the events are still not firing. I've tried a few different configurations, and made sure everything is set correct. Not sure whats up at this point. here is the link to my unpublished html file:
http://bit.ly/1e4n0Uw

Thanks so much for your help, I really appreciate it.
-Brian

Kishore Subramanian

unread,
Oct 7, 2013, 4:13:17 PM10/7/13
to gwd...@googlegroups.com
If possible, can you send us the zip file? I saved the page (using Save on the browser) you shared with us. What I observe is that the Ad moves from one page to another in 1s as configured. But I dont see the animation playing within each page. 

Kishore (GWD team)

b...@agentsilverfox.com

unread,
Oct 7, 2013, 4:21:06 PM10/7/13
to gwd...@googlegroups.com
Hi there,
Here is a zip of my html and images. http://bit.ly/1a5GF2f
At this point, there are 4 total pages, each transitioning to the next page once animation is complete.
Thanks,
Brian

Kishore Subramanian

unread,
Oct 7, 2013, 4:27:14 PM10/7/13
to gwd...@googlegroups.com
Just tried it. Without having context of what the Ad is supposed to do, it is hard to judge if it is doing the right thing. But when I preview the Ad, the Ad does switch from one page to the other after the animation of the page has completed. Are you not seeing this?

Kishore

b...@agentsilverfox.com

unread,
Oct 7, 2013, 4:45:38 PM10/7/13
to gwd...@googlegroups.com
When I preview the ad, it only plays the animation on page 1, which ends with the dark blue background and new headline. It may look like a new 'scene' but is still on page 1.
At this point, I have it set up to just run straight through the pages.
So it should play Page 1,
and then page 1_1 (video page)
and then page 1_3 (copy of page 1)
and then page 1_4 (disclaimer page)

Kishore Subramanian

unread,
Oct 7, 2013, 5:06:10 PM10/7/13
to gwd...@googlegroups.com
Thanks for the files.

We are able to reproduce the issue and looking into it further. I didnt realize that all the initial changes are part of page1. According to the configuration, the page1_1 should be displayed at the end of the page1 animation.

On another note, you could have designed the "screens" that are part of page1 as different pages. It would have made it easier to design the Ad IMO. 

Kishore (GWD team)

b...@agentsilverfox.com

unread,
Oct 7, 2013, 5:13:59 PM10/7/13
to gwd...@googlegroups.com
Thanks so much for the help.
Obviously, this is a very new product, and just trying to learn it the last couple days. I would have designed each scene as it's own page from the beginning, but I found that feature once I was already done with all the animations on page1. I have yet to find a feature that allows to loop the entire timeline, so I thought it would be best to copy the page and set the event to play that at end of the first timeline.

Anyways, since this ad, I have created more ads that let me goto another page at end of timeline animation just fine, it's just not working on this first inPage ad. I thought I would see if you guys could help instead of starting over.

Thanks again, and I'm looking forward to hearing what you find.

Kishore Subramanian

unread,
Oct 7, 2013, 5:35:14 PM10/7/13
to gwd...@googlegroups.com
I have good news and not-so-good news.

First the good news: we were able to find the issue that was preventing the Ad from moving to page 1_1 and we have a workaround. We dont yet know how you got into that state. 

Here is a workaround:

- Open the Ad
- Go to Code View
- Search for "elementCount". You should see 16. Change this to 15.
- Preview
==> You should see the Ad moving to the Video page.

The number 15 refers to the number of DOM elements participating in the Timeline animation. We are not yet sure how the number got out of sync with the number of elements in your timeline UI. You will see that the last line in your Timeline does not have any keyframes. So we reduced the number from 16 to 15 and it works as you had intended.

Hope this helps you get past this stage.

Kishore (GWD team)

b...@agentsilverfox.com

unread,
Oct 7, 2013, 5:51:59 PM10/7/13
to gwd...@googlegroups.com
Awesome! This works! Thank you so much, and keep up the great work. I really look forward to using GWD as a principle part of our creative process.
-Brian

semy...@hotmail.com

unread,
Jul 3, 2014, 11:33:15 PM7/3/14
to gwd...@googlegroups.com
I had the same issue and this worked.

Thanks!

Jaz

unread,
Jul 7, 2014, 1:44:12 PM7/7/14
to gwd...@googlegroups.com
Hi Semy,

Thanks for confirming the fix worked for you. Have an awesome day and please make sure to send us feedback as you continue to use Google Web Designer.

thx
jaz

Jasmine Rogers
Program Manager, GWD

nic...@chamounimoveis.com.br

unread,
Nov 13, 2014, 6:54:59 PM11/13/14
to gwd...@googlegroups.com
Hi Jaz, I'm trying to find this event on the new version of GWD. Can you help me?

Jaz

unread,
Nov 14, 2014, 4:37:06 PM11/14/14
to gwd...@googlegroups.com
Hi Nic,

To do this, you'll need to create an event marker in the timeline and name it something helpful :-) (e.g. animation-end). Once added, you can then add an Event and find your event marker (Target). Let me know if you run into any problems!
Reply all
Reply to author
Forward
0 new messages