Ecommerce Shopify WordPress Discussion

Issue with Scroll Magic Animation on Shopify (Liquid)

I am integrating a animation using scroll magic. The animation is very basic. On scroll I am changing the top from 50% to 30% and at same time playing with opacity from 0 to 1. I have first created HTML page of this and the animation is working fine. https://icon-ui.netlify.app/ Its the 2nd section on page with title => Create something entirely unique to you Then I have passed the same code on Shopify platform and its not working on Shopify https://icon.in/ Its the 2nd section on page with title => Designed to add a touch of style to your journey. If we check both the pages - the title on Shopify page doesnt comes as on netlify link. The top animation is not working. The css, js and HTML files are all same but still gives different result. Can someone help me here please. This is the piece of JS code below <section class="bag_animaction"> <div class="container"> <div class="bag_anim_section"> <div class="animaction_line"> <img src="https://cdn.shopify.com/s/files/1/0832/4805/4580/files/bag_line.png?v=1695559184" class="img-responsive"> </div> <div class="heading_text"> <h2 class="m_tb_0"> Designed to add a touch<br>of style to your journey. </h2> <p class="bag_para">Elevate Life's simple moments with our signature cabin luggage</p> <div class="pt_20"> <a href="/collections/shop" class="primary_btn">Buy Now</a> </div> </div> <div class="bag"> <img src="https://cdn.shopify.com/s/files/1/0832/4805/4580/files/bag.png?v=1695559184" class="img-responsive"> </div> </div> </div> </section> <script> var controller = new ScrollMagic.Controller(); var tween1 = new TimelineMax(); tween1.to(".bag", 1, { top: "50%" }); tween1.to(".bag", 2, { top: "100%" }, "first"); tween1.to(".heading_text", 1, { top: "30%", opacity: "1" }, "first"); // tween1.to(".bag_animaction", 1, { className: "+=bag_animaction_t" }); // build scene var scene = new ScrollMagic.Scene({ triggerElement: ".bag_animaction", duration: 1500, triggerHook: 0, }) .setTween(tween1) // .addIndicators({ start: 10 }) .setPin(".bag_animaction") .addTo(controller); <script> The other animation is working fine but the title animation (50% to 30%) is not working
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.