Help with CSS Animations

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
lpug
 
 
Posts: 79
Joined: Thu Apr 05, 2018 10:15 am

Help with CSS Animations

Post by lpug » Wed May 16, 2018 12:59 am

Hello, Id like some help on the following animation I'm trying to achieve. My scenario is a carousel with 3 slides.
I have overlayed text with set time delays so that they fade-in at certain times, this part of it works fine. The problem I have is when I want that same text to fade-out after the initial fade-in....seems simple but it doesnt appear to work as planned. As an example this is what i setup:

Animation triggered by an event
Slide 1
Activate(1)
Activate CSS3 animation
Fade-In
Text 1
Delay 2000
Duration 3000
This part works well and I can time several other texts to operate this way. However when I want the same text to fade out this is were I have issues.

Slide 1
Activate(1)
Activate CSS
Fade-out
Text 1
Delay 5100
Duration 500

So my thinking is after the initial fade-in after the pre-determined delay in this case 5 seconds then fade-out
It doesn't behave this way, when I preview the the text it has already faded in doesn't fade-out.
Have I misunderstood how this should work, tried so many other possibilities.

Thanks

User avatar
Pablo
 
Posts: 13069
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Help with CSS Animations

Post by Pablo » Wed May 16, 2018 6:14 am

Usually this means hat there is en error in the logic. For example, that you did not use the same type of animations on the object so it it ends up in an undefined state.
If you use animation then you will need to the same type for all transitions, so either JavaScript or CSS not both at the same time.

Note that it's difficult to provide help if I cannot see what you have done, so please always include a link to the project file (wbs)

lpug
 
 
Posts: 79
Joined: Thu Apr 05, 2018 10:15 am

Re: Help with CSS Animations

Post by lpug » Thu May 17, 2018 1:12 am

Hi Pablo,

Thanks for your response, here is a test project

http://www.mediafire.com/file/o5q4s6o5118wp8b/Test.wbs

Text 1 fade-in (2 secs)
Text 2 fade-in (4 Secs)
Text 1 fade-out (5secs)
Text 2 fade-out (6 secs)

Carousel time per slide is 9secs.

As soon as I add the fade-out CSS3 the behavior changes

Thanks

User avatar
Pablo
 
Posts: 13069
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Help with CSS Animations

Post by Pablo » Thu May 17, 2018 6:05 am

It seems to work correct for me.
Do I need to do something to make it not work?

Note however that a Carousel should have at least two slide, otherwise events may not be triggered.

lpug
 
 
Posts: 79
Joined: Thu Apr 05, 2018 10:15 am

Re: Help with CSS Animations

Post by lpug » Thu May 17, 2018 6:37 am

Yes I understand about having 2 slides....it almost works as it should. When you preview my example the text 1 and text 2 are not fading in they are already visible....so the text never fades-in....if you removing the last 2 entries in the events the text fades-in and out. I want the logic to work as below:

Preview page
Text 1 fades in
Time delay
Text 2 fades in
time delay
Text 1 fades out
time delay
Text 2 fades out
Then repeat sequence

User avatar
Pablo
 
Posts: 13069
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Help with CSS Animations

Post by Pablo » Thu May 17, 2018 7:33 am

To fade an object in, it first has to be faded out otherwise its start state is not correct.

See this example
http://www.wysiwygwebbuilder.com/carouselevents.html

lpug
 
 
Posts: 79
Joined: Thu Apr 05, 2018 10:15 am

Re: Help with CSS Animations

Post by lpug » Thu May 17, 2018 8:06 am

Thanks Pablo, i'm sorry to keep at this. I'm not sure I've made myself understood, the examples you directed its not quite what I'm after. I think I'm missing something simple though. You mentioned and object such as text in my case has to fade-out before it can fade-in. I'm going to rewrite what I'm trying to achieve hopefully I've made myself a little more clearer, if you can post an example other than mattdusk example as this is slightly different, it would be great.

Carousel
All animations performed by css3
1 image slide just for testing with 9sec sequence
The image has no text upon previewing page
After 2secs text 1 appears (Fade-In) for 2secs
After 4.1secs text 2 appears (Fade-In)for 2 secs
After 4.5secs text 1 fades-out duration 0.5secs
After 7secs text 2 fades-out duration 0.5 secs

Then slide 2 appears after 9secs in this case there is only 1 slide.

Thanks in advance

User avatar
Pablo
 
Posts: 13069
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Help with CSS Animations

Post by Pablo » Thu May 17, 2018 9:11 am

Sorry, I cannot create example projects. For me this may also take a lot of time.

But it is important to understand that if you want to fade an object in, that its start state should be faded out, otherwise fade-in may not have the desired effect.

My advise is to focus on one thing at a time, try not to do everything at once. That also make it easier to help you if it does not work as expected.

lpug
 
 
Posts: 79
Joined: Thu Apr 05, 2018 10:15 am

Re: Help with CSS Animations

Post by lpug » Thu May 17, 2018 10:09 am

ok thanks....if you say an object must start with it being faded-out that means the object will always be visible upon first preview, yes?

User avatar
Pablo
 
Posts: 13069
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Help with CSS Animations

Post by Pablo » Thu May 17, 2018 10:17 am

By default, all objects are visible when the page load.
When using animations you can use the 'ondocumentready' event in the Page Properties to initially hide objects when needed.
For example, by adding 'animate-fade-out', duration 0.

Also, as demonstrated in the Carousel tutorial, you may want to hide the object again when the slide is no longer active. So, the next time the slide is shown the animation will restart.

lpug
 
 
Posts: 79
Joined: Thu Apr 05, 2018 10:15 am

Re: Help with CSS Animations

Post by lpug » Thu May 17, 2018 10:51 am

Pablo can you please refer to the example I posted....text 1 and text 2 both appear at the same time on page load regardless on whether I set an event in page properties to "ondocumentready" and fade-out duration to 0. If you look at the events of the carousel and remove the last 2 fade-out animations the text fade-in and out as desired. I would really like to recreate the text in the slide as per
http://www.totallook.com.au/the-experience/
Do you think I can do this within web builder, or do I require a third party carousel maker?

User avatar
Pablo
 
Posts: 13069
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Help with CSS Animations

Post by Pablo » Thu May 17, 2018 11:17 am

The problem is that the fade-out animation affects the begin state of the fade-in animation.
The reason for this is that when you use 'Delay' it will queue the animation using the first keyframe of the animation.
To solve this, it may be better to use a Timer to start the second animation, so it will not affect the state of previous animations.
or you can move the fade out animations before the fade in animations.

Note that this has nothing to do with WWB, it all 'logic'. if you have conflicting settings then you may see unexpected behavior.

lpug
 
 
Posts: 79
Joined: Thu Apr 05, 2018 10:15 am

Re: Help with CSS Animations

Post by lpug » Fri May 18, 2018 12:09 am

Pablo what could be the reason that none of the css3 event animations work under page properties.
I have one text object that I want to apply animation either on"documentready" or "onload" and nothing happens.
However the normal hide or show animation works.

Thanks

User avatar
Pablo
 
Posts: 13069
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Help with CSS Animations

Post by Pablo » Fri May 18, 2018 5:51 am

This may be related to the objects not being 'ready' yet.
For example, if you have move the style sheet to the end of the page then the styles may not have been applied yet.

lpug
 
 
Posts: 79
Joined: Thu Apr 05, 2018 10:15 am

Re: Help with CSS Animations

Post by lpug » Fri May 18, 2018 6:39 am

I'm so sorry that I don't quite get it....I have a new project with one page 2 text items over a carousel, cant get make simpler than that.
I managed to sort of get fade-out to work using a timer. The only issue I have now is that when the carousel sequences back to the start the text objects initially flash for 1 sec hence why I'm trying to make the objects invisible on page load. I dont understand when you say I might of moved the style sheet to the bottom of the page, how can I check and fix it?

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests