Animation hide image for keyframe

[dgu...@tendringtechnologycollege.org]

Afternoon,

I am trying to create a simple animation with multiple images that need to hidden during certain keyframes. What is the best way to achieve this as simply hiding the layer turns it off for the whole animation rather than just that keyframe.

Thanks in advance

[Google Web Designer beta]

Hello,

Thank you for using GWD.

For your question, you might want to try these

1. Set opacity 0-1 

Please make sure to give an ID name to each element you like to assign events to

Insert an timeline event marker (clicking a gray diamond)  at where you like to hide a certain element and set the event by double-clicking the diamond in the timeline.

Events would like this for example (page1>event-1>CSS:Set styles>mydiv1(ID)>opacity = 0

2. Set visibility (hidden/visible) using CSS style in timeline event. 

- Give ID name to an element (your image or div for example)

- Insert Timeline event marker (a gray diamond where you like to hide your element)

- Double-click the diamond 

- Set the event: CSS:Set styles>the ID of your target element>add, visibility=hidden

This way, when timeline reaches to the diamond marker, the target element gets hidden.

(Events are only viewable on browser preview)

Could you try this and see if that works?

Thanks,

Mariko

[izaa...@gmail.com]

this isn't working for me. when i edit a keyframe, it makes that edit to the entire layer for the entire animation. I've tried the opacity, and the css route. neither work. what am I doing wrong?

[Mariko Ogawa]

Hi,

The timeline event approaches I described previously were using Timeline event marker, not editing individual keyframe.

The idea is that each element with ID assigned will do or change its property when the timeline marker event gets triggered in the timeline. 

You will need at least one animation layer (with keyframes) to see Timeline event in the Events Panel.

It sounds that the issue you described you were editing first keyframe for an element, and the change persists across all the keyframes.

That behavior is expected, because GWD treats the very first keyframe as a base class for the element.

Feel free to send us your GWD file if you would like us to take a look.

Thanks,

Mariko (GWD team)

[martinezfu...@gmail.com]

Hello,

I have the same problem. When I assing "Visibility: hidden" it affects to all my animation. I have selected a keyframe but it do the same thing.

I can't use opacity cause I need a quicker transition.

Thanks

[ashley...@prowebsoftware.net]

same for me. opacity works, but visibility no matter what keyframe you have selected changes the whole animation.

[levasc]

Hello, 

GWD 1.6.4.1010, ubuntu 14.04

I tried this way, but found out that no events are saved in GWD, I save an event, but then again double click on it - no settings saved at all.

[Emilio]

I'm having a similar problem. 

I can hide/show divs or elements using the event.

Noticed two things though: 

1) the visibility is not affected within Google Web Designer but only in the external browser preview. This makes building the creatives tricky.

2) the event marker doesn't save its settings sometimes. I'm still testing this to replicate the problem.

[voia...@gmail.com]

Fedora, 1.8.2.0524, 2017 year and I have this problem too :(

[Google Web Designer beta]

Some updates on this issue...

Now you can set step-end and step-start easing to skip a keyframe in the middle, so the animation appears to hide the middle keyframe.

For example, if there are three keyframes in the timeline, and if you would like to make the middle keyframe to be skipped, set step-end for the 1-2 keyframes, and set step-start for 2-3 keyframes.

These are easing settings, so please find them from Right-Clicking the animation span.

When it is previewed, the animation won't have smooth animation, but it jumps from 1 to 3rd keyframe instead.

If the timeline event is used with setting visibility:hidden, please make sure to set visibility:visible for another timeline event marker. Otherwise,  visibility:hidden is set for the rest of the animation time.

Note: Visibility change can be only seen on browser preview, not the stage preview.

When double-clicking the timeline event marker, it only shows the blank event dialog, not the event you set previously. We are working on this issue, but in the meantime, please go find the event (e.g. page1>event-1>...) in the Event Panel and double-click the event there to see the existing event.

Please let me know if you have any question,

Thanks!

Mariko - Google Web Designer Team