-
Posts
-
Is there a way to have other elements animate in when a user scrolls to wherever that element is?
like the icon lists and images can.I have a special header element and I wanted that to animate in so i tried to assign a custom css class to the element and apply some css that an animated icon had.
Here is what I got, but it doesn’t work:
#top .jrm-easyas { animation: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s normal none 1 avia_appear; opacity: 1; transform: scale(1); }If I apply other properties such as border and background color, they do appear, so I know the class is correct ad active.
Any ideas on how to get that animation working?
I would love to be able to animate whatever I wanted in :)thanks!!!!
Hey jtree5757!
You can add a unique selector for each Avia Elements. Edit functions.php, find this code:
if(isset($avia_config['use_child_theme_functions_only'])) return;Below, add this code:
add_theme_support('avia_template_builder_custom_css');Edit any avia elements like the Special Heading then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome_heading”.
You can add something like this on your custom.css or Quick CSS:
.av-special-heading.awesome_heading { position: absolute; left: 0px; } @-webkit-keyframes heading-animation { 0% { left: -70px; opacity: 0; } 100% { left: 0; opacity: 1;} } @-moz-keyframes heading-animation { 0% { left: -70px; opacity: 0; } 100% { left: 0; opacity: 1;} } @-o-keyframes heading-animation { 0% { left: -70px; opacity: 0; } 100% { left: 0; opacity: 1;} } @keyframes heading-animation { 0% { left: -70px; opacity: 0; } 100% { left: 0; opacity: 1;} } .av-special-heading.awesome_heading { -webkit-animation: heading-animation 2s; -moz-animation: heading-animation 2s; -o-animation: heading-animation 2s; animation: heading-animation 2s; }Reload the page. :)
Cheers!
IsmaelHmmm
Any ideas why it isn’t working on the other page?
The only difference I see is that your page has the special heading not within a column or color section.
And my page had a 1/1 column with the special heading within that column.
Maybe this is the issue?
Hi!
Please edit the Special Heading element again after you place inside the 1/1 column layout. Add the “awesome_heading” custom css class again. I placed the Special Heading element inside a 1/1 column and I’m not sure why the custom css class was removed. I have to add it again. http://onecraftyshop.com/special-heading-animation-test/
Cheers!
Ismaelnot working.
I’m not really sure how you got it to work. I tried not putting it into a column and it still didn’t work.
Could it have something to do with being on the homepage?
*Also, yea my custom css classes do that. They save and behave normally, but when I go back in to edit, the custom css class is often blank. This doesn’t happen 100% of the time, but pretty often. Not sure why.
Hi!
On my end at least I’m seeing the heading animate on the home page. You may want to try disabling caching for your site when dev tools are open (assuming you are using Chrome) so that you are always seeing the most recent version of all files. It can save a lot of headaches.
Best regards,
DevinHey!
Definitely not working on my end. Weird if it is on your end.
I disabled cache while dev tools are open in chrome, I erased all browser history, cleared the cache but it didn’t work.
I’ve done this in both firefox and chrome.
Hi!
Here’s how it looks on my end:
http://screencast.com/t/DmVY8fnazwoHave you tried seeing it from a different computer?
Regards,
JosueThanks for taking your time to do the screencast.
that is correct. The animation works on the http://onecraftyshop.com/special-heading-animation-test/ but it doesn’t work on the homepage: http://onecraftyshop.com
I gave the special heading element the same custom css class of “awesome_heading” on the homepage, but it doesn’t animate. To clarify, the “easy as” special heading on the home page is what should be animating.
Not sure why it won’t animate here, but it animates on the other page.
Hi!
Around 0:10 i performed the test the homepage too, look at the bottom, the “easy as” is animating.
Regards,
JosueSorry, totally missed that! :)
So i figured it out! It only animates at the beginning of the page load. I was trying to get it to animate when a user scrolls down to it. Is this possible?
Thanks, you guys are such a big help!
Hi!
Although that is integrated into the theme for animated elements via javascript I couldn’t really tell you how to piggyback onto it. I’ll tag the topic for Kriesi and Peter who may be able to help but with how busy the forums are right now customization like that may not be possible to assist with as its already outside the scope of what we should be covering through support.
Cheers!
Devin
- The topic ‘Animate in effect for other elements??’ is closed to new replies.