HELP: How To Add CSS3 Animation Cheat Sheet

Tourist
4 0 0

Hello everyone,

I came across this CSS3 Animation Cheat Sheet and I want to see if anyone can write a tutorial or help me add it to my site. Here is the link to the Animation Cheat Sheet: http://www.justinaguilar.com/animations/index.html#

Bonus info: I am using the Jumpstart theme and would like to implement the slide left- and slide right animations on my 'image with text' sections. 

 

Really hope someone is able to help me out, Thank you! :)

0 Likes
Astronaut
875 104 194

Click their download button, and Ctrl + a to select all the text on the screen and copy it. Then go into your code and go into the assets folder and add a new asset -- Create a Blank file -- name it animations -- and select .css from the dropdown menu. Then go to your theme.liquid in your layout folder and find the <head> of your html and add this in there.

 

{{ 'animations.css' | asset_url | stylesheet_tag }}

You are good to go. Just add the class names to your elements and the animations will trigger on page load. See their Adding Effect section to see how to get the animations to trigger during different events like scroll or click.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
4 0 0

Thank you! 

It was super helpful. Still not 100% sure how I actually go ahead and add the animations to the 'image with text'. Do you know how I could do that? 

Thanks in advance :)

0 Likes
Astronaut
875 104 194

If you're talking about this section:

 

image-with-text.png

 

Go into your Sections folder and open "feature-rows.liquid" and find this line:

 

<div id="home-imagebox-{{ section.id }}" class="home-imagebox">

Add a space to the class name and add the class you want to use:

<div id="home-imagebox-{{ section.id }}" class="home-imagebox floating">

No your section will be floating. If you add the class slideLeft, your div will slide in. But it will only happen on page load. So say you wanted to have it slide left when the user scrolls to it. Add this to the bottom of the section right before the {% schema %} tag:

 

<script>
	$(window).scroll(function() {
		$('#home-imagebox-{{ section.id }}').each(function(){
		var imagePos = $(this).offset().top;

		var topOfWindow = $(window).scrollTop();
			if (imagePos < topOfWindow+400) {
				$(this).addClass("slideLeft");
			}
		});
	});
</script>

And add this inbetween the <style> </style> tags at the top of the page:

 

        .home-imagebox{
         visibility: hidden;
         }

Mine looks like this since there are some other styles in there:

 

	<style>
		#home-imagebox-{{ section.id }},
		#home-imagebox-{{ section.id }} .placeholder-background.imagebox {
			background-color: {{ section.settings.background_color }};
		}
		#home-imagebox-{{ section.id }} .content h3,
		#home-imagebox-{{ section.id }} .content p {
			color: {{ section.settings.text_color }};
		}
		#home-imagebox-{{ section.id }} .content a {
			color: {{ section.settings.text_color }};
			border-color: {{ section.settings.text_color }};
		}
		#home-imagebox-{{ section.id }} .content a:hover {
			color: {{ section.settings.background_color }} !important;
			border-color: {{ section.settings.text_color }};
			background-color: {{ section.settings.text_color }};
		}
		#home-imagebox-{{ section.id }} svg.placeholder-image {
			fill: {{ section.settings.text_color }};
		}
        .home-imagebox{
         visibility: hidden;
         }
	</style>

Now when you scroll to that element it will slide in from the right.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
4 0 0

Thanks!

That helped a ton! Still have a couple things though. First off it doesn't appear to have the animation when I scroll down to the section but instead when the page has loaded. Here's my code. Maybe you can spot what is wrong.

Thanks in advance!

<div class="index-section home-section">
	<style>
		#home-imagebox-{{ section.id }},
		#home-imagebox-{{ section.id }} .placeholder-background.imagebox {
			background-color: {{ section.settings.background_color }};
		}
		#home-imagebox-{{ section.id }} .content h3,
		#home-imagebox-{{ section.id }} .content p {
			color: {{ section.settings.text_color }};
		}
		#home-imagebox-{{ section.id }} .content a {
			color: {{ section.settings.text_color }};
			border-color: {{ section.settings.text_color }};
		}
		#home-imagebox-{{ section.id }} .content a:hover {
			color: {{ section.settings.background_color }} !important;
			border-color: {{ section.settings.text_color }};
			background-color: {{ section.settings.text_color }};
		}
		#home-imagebox-{{ section.id }} svg.placeholder-image {
			fill: {{ section.settings.text_color }};
		}
              .home-imagebox{
         visibility: hidden;
         }
	</style>
	<div id="home-imagebox-{{ section.id }}" class="home-imagebox slideRight">
		{% if section.settings.image %}
			<noscript>
				<div class="grid__item one-half medium-down--one-whole image {% if section.settings.home-featured-align == 'right-img' %} push--large--one-half {% endif %}"
					style="background-image: url('{{ section.settings.image | img_url: '1024x1024' }}');display: block;"></div>
				</noscript>
			{% endif %}
		<div class="grid__item one-half medium-down--one-whole image no-js lazyload {% if section.settings.home-featured-align == 'right-img' %} push--large--one-half {% endif %}"
		 {% if section.settings.image != blank %}
	      data-bgset="{% include 'bgset', image: section.settings.image %}"
	      data-widths="[320, 360, 375, 414, 568, 684, 720, 732, 736, 768, 1024, 1200]"
	      data-sizes="auto"
	      data-parent-fit="cover">
      {% else %}>
		  <div class="placeholder-background imagebox">
		    {{ 'image' | placeholder_svg_tag: 'placeholder-image' }}
		  </div>
		{% endif %}
		</div>
		<div class="content wrapper">
			<div class="grid__item one-half medium-down--one-whole content {% if section.settings.home-featured-align == 'left-img' %} push--large--one-half {% else %} pull--no {% endif %}">
				<div class="large--display-table">
					<div class="large--display-table-cell">

						  {% unless section.settings.home-featured-title == blank %}
							<h3>{{ section.settings.home-featured-title | escape }}</h3>
						  {% endunless %}
						  {% unless section.settings.home-featured-content == blank %}
							{{ section.settings.home-featured-content }}
						  {% endunless %}
						  {% unless section.settings.home-featured-btn-label == blank %}
							<a class="btn btn--regular btn--outline btn--light" href="{{ section.settings.home-featured-btn-url }}">{{ section.settings.home-featured-btn-label | escape }}</a>
						  {% endunless %}

					</div>
				</div>
			</div>
		</div>
	</div>
</div>

 

0 Likes
Highlighted
Astronaut
875 104 194

Remove the class from the div where you added it. You have to use the script I provided to add that class on page scroll. If you add it directly to the element it will just do it on load. So if you added the script already all you have to do is remove the class so it's just class="home-imagebox" again. If not, you have to add this script right above the {% schema %} tag:

 

<script>
	$(window).scroll(function() {
		$('#home-imagebox-{{ section.id }}').each(function(){
		var imagePos = $(this).offset().top;

		var topOfWindow = $(window).scrollTop();
			if (imagePos < topOfWindow+400) {
				$(this).addClass("slideRight");
			}
		});
	});
</script>
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
4 0 0

It worked! Thank you so much. 

 

My plan was to have 4 images and then have the first one slide in from the right, the second from left, third from right and finally fourth from left. Is that possible in any way?

0 Likes
Astronaut
875 104 194

It's completely possible.  You could add your images and give them all the same class name like "animated_image". You can then edit the previous code to add alternate class names depending on a certain count. Depending on your image size you may need to play with that line of code that adds 400 to the image postion. Check this codepen out, I think this is what you're trying to accomplish:

 

https://codepen.io/SharedPen/pen/gJVzOZ

 

Just scroll to make the images show up

 

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes