Copy theme animation

Highlighted
New Member
4 0 0

Hi there,

 

For our Shopify webshop we're using the Narrative Theme

 

Within this theme there's an orange bar above the headers.

This bar is animated as such:

When the bar enters the viewport of the user it stretches out.

barowan_0-1602946401373.png

 

I'm using the Shogun integration to add and design other pages.

 

Question: How can I copy/use the same feature/functionality in the custom HTML-section(or other places) of Shogun?

 

Thank you in advance!

Thank you!

 

 

0 Likes
Highlighted
Shopify Partner
485 54 76

Hey there @barowan ,

This can be done with some CSS and JQuery. Are you able to provide your store URL so I can take a look and provide you the solution here?

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
New Member
4 0 0

Hi @UmairA,

 

Thank you very much for your reply.

 

Store url=https://field-sportswear.com/

 

Further info:

 

I'd like to add the functionality from the homepage in this page: https://field-sportswear.com/pages/sportshirt-bedrukken

(Which is built in Shogun)

 

Cheers

Thank you in advance!

 

 

0 Likes
Highlighted
Shopify Partner
485 54 76

Hey again @barowan ,

Yes, it's possible but you'll need to work with some code. Here's how you can do it.

Create an HTML element and assign it an id or class and then in then in the theme.scss.liquid file use the given id or class to select the element and add the following code

.You-Element-class {
    content: '';
    display: block;
    width: 0;
    height: 6px;
    margin-bottom: 20px;
    background-color: #ef3f23;
    transition: width 0.5s ease-out;
    margin: 0 0 20px;
}

 

If that sounds complicated, you can message me for help.

Hope I was helpful, If so, consider giving a thumbs up and Accept solution.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
New Member
4 0 0

Hi @UmairA 

 

Doesn't seem to work.

 

I added a custom HTML sector and added: 

<div class="expandingline"> </div>

on Shogun.

In the  theme.scss.liquid i added:     .expandingline{ content: ''; display: block; width: 0; height: 6px; margin-bottom: 20px; background-color: #ef3f23; transition: width 0.5s ease-out; margin: 0 0 20px; }   Doesn't look like it's working.   I feel I'm close

0 Likes
Highlighted
New Member
4 0 0

HI @UmairA any chance of looking at this again?

 

 

kind regards,

0 Likes