Effects: Transition (Movement) in Pro

Hi,

I have discovered the effects which are added in Pro and like to use them to create an animation. Within the Pro Theme page builder the animation/effect is working fine while I am editing. Once I am leaving the page builder nothing will be displayed.

Page Builder > Section > Row > Column > Div (Absolute Position)
Effect itself in based on the following text element: Div (Absolute Position) > List One > List_one_collapse_x (x for each element)
Each text element is overlapping to the same position with a custom margin arrangement, from there the animation is sliding upwards using a transition (movement towards the y axis) with different time settings (each transition 1000ms).

I would be interested if the transition animation is usually working without custom css within the pro theme.
Many thanks for your help in advance!

The result of the animation should look similar to the following:
The setup can be looked up found here: Text Changing Animation

Hello Jannes,

Thanks for writing in! Regretfully the changing animation effect on the example URL is not possible with the Pro theme’s effects module. We do take note of this and added it as a feature request in addition to the Headline element’s Typing text effect.

Best Regards.

@ruenel

Hi Rue,
Thank you for your response. I already had an odd feeling about it anyway was worthwhile a try.
I will figure out a way to customise it for now, but appreciate seeing this in future!
Kind regards

You are most welcome, Jannes!

Hi, I thought I gonna share my solution and final result with the community. The animation does not require any plugin and can be edited fairly easy. If someone wants to try to implement this idea into their webpage I will provide my sourced code and downloadable .tco file. Guidance and instructions can be found below.
Notice: Animation is not working with 767px view port.

animation_pro_preview

Introduction on how it works


Elements can be edited as usual. Further guidance can be found in the .tco file. Example: <! COMMENT > These are displayed in the editor but won’t appear on your webpage.

Code: Already included in TCO file

#landingpage_animation

#landingpage_animation ul div {animation:animate 12s linear infinite;}@keyframes animate{0%{transform: translateY(0px);} 15%{transform: translateY(0px);} 20%{ transform: translateY(-12.5px);} 40%{ transform: translateY(-12.5px);} 45%{transform: translateY(-25.25px);} 65%{transform: translateY(-25.25px);} 70%{transform: translateY(-37.75px);} 90%{transform: translateY(-37.75px);} 95%{transform: translateY(-50.75px);} 100%{transform: translateY(-50.75px);}}

#animation_helper_fade

#animation_helper_fade {
animation: fadein ease 12s infinite;}@keyframes fadein{0%{opacity:0;}15%{opacity:0;}30%{opacity:1;}40%{opacity:1;} 46%{opacity:0;}65%{opacity:0;}70%{opacity:0;} 90%{opacity:0;} 95%{opacity:0;} 100%{opacity:0;	}}

#animation_cut_fx00

#animation_cut_fx00 {
	animation: ani_cut 12s infinite;}@keyframes ani_cut {0%   { opacity: 0; }  80% { opacity: 0; } 90% { opacity: 0; } 96% { opacity: 1; }  100% { opacity: 1; }}

Files for download
TCO File: Download Here

Any questions comment on the tread. Best of luck!

Hi Jannes,

Thanks for sharing your custom solution, we really appreciate it.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.