Search the Community

Hi, I want to add animations like the Monogrid website (https://monogrid.com/) to a WordPress site. How can I do this in WordPress? Should I use GSAP, any plugin, or custom code? Please guide. Thank you.

Hi, i'm looking for a custom plugin/code to have on https://studiojae.fr/ the same result as i posted attached on https://laplumerp.com/ U can see it on the main page and on the /manifesto, theres another animation. How could we do this ? The idea is just to have on Elementor a section on Style or Advanced to "Enable" the effect via a list of options? Like we can have with ReyTheme ! Let me know if u know anything that can make it work. If we need specifics plugin on StudioJae to run it smoother. I don't want my pageload to implode. Otherwise, ive found a website with paid templates but i dont wanna spend 5€ per animation. 2025-09-19 15-46-25.webm

Hi everyone, I’m encountering an issue with GSAP’s ScrollTrigger where a section jumps when unpinning, and I’m looking for some guidance or a solution. Problem: I have a section that is pinned using ScrollTrigger while scrolling, but when the pinning ends (unpins), the section seems to "jump" or shift unexpectedly. The behavior happens when the scroll reaches the end point defined in the ScrollTrigger. I am also using scrub for smooth scrolling, and pinSpacing: false to prevent extra space for the pinned element. May refer to the section via https://cantal.bluecube.com.sg/sectors/ Here attached the CSS that I used: .scrolling-cards { overflow: hidden !important; position: relative !important; } .scrolling-cards-header-wrapper { height: 100vh !important; left: 0; position: relative !important; top: 0; width: 100% !important; } .scrolling-cards-header { height: 100vh; left: 0; position: absolute; top: 0; width: 100%; } .scrolling-cards-image { height: 100vh !important; left: 0; position: absolute !important; top: 0; width: 100% !important; } .scrolling-cards-image:after { background: #000; content: ""; height: 100%; left: 0; opacity: .3; position: absolute; top: 0; width: 100%; } .scrolling-cards-image img { height: 100vh !important; object-fit: cover !important; } .scrolling-cards-title { position: fixed !important; top: 0; left: 0; width: 50% !important; height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 50px !important; z-index: 10 !important; } .scrolling-cards-item { height: 100vh !important; position: relative !important; width: 100% !important; } .scrolling-cards-card { background-color: #FFF; padding: 50px !important; position: absolute !important; right: 50% !important;; top: 50% !important; transform: translateX(50%); width: 580px !important; z-index: 2 !important; } .scrolling-cards-card p:last-child { margin-bottom: 0; } @media screen and (min-width: 1024px) { .scrolling-cards-title { justify-content: center !important; padding: 0 0 0 calc((100vw - 1180px) / 2 + 20px) !important; width: 48vw !important; } .scrolling-cards-card { max-width: calc(50% - 20px); right: calc((100vw - 1180px) / 2 - 20px) !important; /* top: 250px !important; */ transform: translateY(-50%); } } @media screen and (max-width: 1024px) { .scrolling-cards-title { width: 100% !important; justify-content: unset !important; padding-left: 23px !important; padding-right: 23px !important; } .scrolling-cards-card { left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; width: calc(100vw - 46px) !important; padding: 30px 25px !important; } } And here is the gsap script that I used: document.addEventListener("DOMContentLoaded", function () { gsap.registerPlugin(ScrollTrigger); const cards = gsap.utils.toArray(".scrolling-cards-item"); const images = gsap.utils.toArray(".scrolling-cards-image"); if (cards.length > 1 && !document.body.classList.contains("wp-admin")) { const tl = gsap.timeline({ scrollTrigger: { trigger: ".scrolling-cards", pin: ".scrolling-cards-header", start: "top top", end: "bottom bottom", scrub: 1, anticipatePin: 1, pinSpacing: false, markers: true } }); cards.forEach((cardWrapper, i) => { const card = cardWrapper.querySelector(".scrolling-cards-card"); const image = images[i]; const prevCard = i > 0 ? cards[i - 1].querySelector(".scrolling-cards-card") : null; const baseTime = i * 1.5 ; // Fade in background image (if not the first) if (i!==0) { tl.from(image, { autoAlpha: 0, duration: 1 }, baseTime); } // Fade in card // if (i !== 0) { tl.from(card, { autoAlpha: 0, y: 60, duration: 0.5 }, baseTime + 0.5); // } // Fade out previous card (if not the first) if (i > 0 && prevCard) { tl.to(prevCard, { autoAlpha: 0, y: -60, duration: 0.5 }, baseTime); } }); } }); The Issue: When the scroll reaches the end of the ScrollTrigger, the section "jumps" or shifts suddenly as the pin is released. I suspect this might be related to the CSS positioning (position: fixed on .scrolling-cards-title) and overflow: hidden on the parent .scrolling-cards. What I’ve Tried: I’ve tried adjusting the pinSpacing setting (true and false), but the jump still happens. Removing the overflow: hidden style from .scrolling-cards does not resolve the issue either. The jump seems to occur at the end of the ScrollTrigger, right before the element unpins.

Hello, First off, I just want to say how excited I am about GSAP going completely free for everyone—thanks to Webflow’s support. The community is buzzing, and I honestly can’t wait to see what’s coming next! I’m reaching out for some guidance and clarification as I prepare to dive into a new personal project that will heavily rely on GSAP animations, along with WordPress and Elementor Pro. 🔧 Project Setup – My Current Plan The project will involve a variety of animations and page-level interactions. Here's a brief outline of how I plan to manage everything: ----------- Layer Purpose Key Tools / Locations Local Dev Safe playground for building & testing. Local by Flywheel → (my local Browser URL) running Hello Elementor + Hello Child Theme. Source Code Modular animation code & global styles. hello-theme-child-master/src/… • js/animations/*/index.js • css/animations/*.css • js/app.js (aggregator) Bundling Turn scattered modules into a single, optimized payload. Webpack (installed via npm) + custom webpack.config.js; output enqueued by PHP. Version Control Single source of truth & change history. Git (repo lives in child‑theme folder) → push to GitHub main via VS Code’s Git Bash. Deployment Ship the latest build to production with one click. WP Pusher (monitors main branch). After each push, click Update in WP Pusher. Runtime (Browser) Execute GSAP timelines inside Elementor’s markup. GSAP CDN + your compiled app.js & animation CSS, loaded in the order you defined. ----------- ❓My Main Question Is this the right approach for a GSAP-heavy WordPress project using Elementor, or would it be more practical to simply use a Code Snippet Manager plugin and embed everything there? I’m aiming to be as structured and intentional as possible from the start, but if this direction is overcomplicating things, I’d rather adjust now than burn time later. Your insight would be invaluable and honestly a huge time-saver. I deeply appreciate your time, and apologies for the long message — I just wanted to provide full context. Looking forward to your response. Warm regards, George

Hey, everybody. I am developing wordpress themes. In many projects I use GSAP animations. In large multi-page sites I face the problem of poor performance of GSAP scrolltriger property pin. Probably I am lacking experience to optimize it. Perhaps someone can share his experience how to better optimize animations in such projects (in the context of Wordpress and in general)? Perhaps it makes sense to separate all pages by block and load js-code animations only when there is a block? Thanks for any information PS. To understand the Wordpress problem I will add. That in most sites I create my custom theme from scratch. Pages are separated by blocks. These blocks work with the help of ACF Gutenberg plugin.

Hi everyone, I'm facing an issue occasionally, and it's a bit challenging to reproduce reliably in a CodePen due to the complexity of my setup. The issue occurs with dynamic content. Sometimes a part of a GSAP timeline is skipped. Specifically, I notice that the fromTo animations are occasionally stuck in the "to" state, while the rest of the timeline continues as expected. There’s no warning in the console from GSAP, and there are no errors about missing elements. The strange thing is that this mostly happens with WordPress menu items that come in dynamically, which leads me to suspect a timing issue with when the elements are loaded. I tried logging the elements to the console before creating the timeline, and they were all present as a NodeList. Yet, the issue persists. As I mentioned, sometimes it works perfectly fine. I managed to solve this with a slight artificial delay using setTimeout, which seems to allow the timeline to work every time. Interestingly, using GSAP's delay property didn't make a difference. However, using setTimeout feels hacky and unreliable, and I'm hoping there’s a better, more elegant solution. Setup: WordPress website JavaScript: ES6 Modules (using imports/exports) Build Tool: Webpack Has anyone faced similar issues with dynamic content in timelines, especially with WordPress or other dynamically generated content? Are there any best practices in GSAP for handling timing issues with dynamic elements, especially without resorting to setTimeout hacks? I believe this is a broader topic, as I've noticed the same problem in other projects as well. Any advice or insights are greatly appreciated. Thanks in advance!

https://cloud.movavi.com/play/3c84a61c-32e4-498b-b514-07d74585fb02 So my structure is the following: .sectie-branding (section) .branding-row .et_pb_row .website-row .et_pb_row .activatie-row .et_pb_row This is my gsap: gsap.registerPlugin(ScrollTrigger); const rows = gsap.utils.toArray('.sectie-branding .et_pb_row'); gsap.to(rows, { opacity: 1, // Fade in the rows ease: "none", scrollTrigger: { trigger: '.sectie-branding', // Target the branding section start: "top top", // Start when the section hits the top of the viewport end: "bottom top", // End when the bottom of the section hits the top scrub: true, // Smooth scroll interaction pin: true, // Pin the section during the scroll anticipatePin: 1, // Adjust pin behavior for smoother experience onUpdate: self => { // Loop through each row and calculate visibility based on progress const totalScroll = rows.length; const progress = self.progress * totalScroll; // Get scroll progress based on the number of rows rows.forEach((row, i) => { const rowProgress = progress - i; // Calculate how far we are from this specific row gsap.to(row, { opacity: 1 - Math.abs(rowProgress), duration: 0.5 }); // Fade in/out based on progress }); } } }); This is my css: .sectie-branding { max-height: 300vh; position: relative; height: 300vh; /* Simulates scrolling for 3 sections */ overflow: hidden; /* Prevents overflow outside the section */ } .sectie-branding .et_pb_row { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; /* Each row fills one full viewport height */ display: flex; align-items: center; justify-content: center; opacity: 0; } .sectie-branding .et_pb_row.active { opacity: 1; } But as u can see in the video, it looks like its inserting another 300vh section right after u scroll out of the last row causing an huge black-space.

We are looking for an Intermediate to Senior Frontend WordPress Developer to join our team on a full-time basis. You are someone who thinks of code as art – you develop beautiful, easy-to-follow code that is fast and standards-compliant without relying on too many external libraries. This role will primarily work on the TechBlocks website and those of our sister companies, associations, and other internal and external-facing development projects. Occasionally, this person may be asked to support client-facing projects. The successful candidate will be able to operate independently to develop responsive pages for WordPress, This person will collaborate with our UI/UX Designer, Graphic Designer, and agency partners to develop impactful pages. They will be responsible for the technical SEO of our properties, including front-end code compliance, site speed, and core website vitals. Key Responsibilities: · Develop new pages as required by our marketing, sales, and human resources teams. · Develop new Gutenberg blocks as required. · Develop bespoke landing pages as required to support campaigns and initiatives. · Continuously test and improve our core website vitals and other performance indicators. · Implement A/B and Multi-variant testing on content blocks, whole pages, or specific elements. · Maintain code repository and syncing environments between dev, staging, and production. · Manage Core WordPress and Plugin Updates · Manage Technical SEO, including Schema/Microdata and social media markup. · Work with our UX/UI designer, graphic designer, and external UI designers to implement standards-compliant pages. · Manage day-to-day content updates as required. · Manage accessibility features of our website. Requirements & Skills · A minimum of 5 years experience in WordPress Development. · Strong frontend responsive development skills in HTML, JavaScript/TypeScript, and CSS are required. · Advanced knowledge of Advanced Custom Fields, developing Gutenberg blocks, and the Timber MVC Framework is required to be successful in this role. · Experience with source control platforms like bitbucket is required. · Experience with Jira or other issue-tracking platforms is required. · Javascript animation framework knowledge, including GSAP.js and Apline.js is required · Strong understanding of UI design and the ability to create new pages to match existing patterns and design concepts. · Fluent with Figma is considered an asset. · Understanding of the HubSpot CMS is considered an asset. · Understanding how to build responsive email templates is considered an asset. · Intermediate skills in PHP and server-side architecture are considered beneficial to this role. · Strong knowledge of WCAG 2.0 AA+ accessibility guidelines. · Strong knowledge of microdata formats such as schema and social media tags such as Facebook OGP and Twitter Card. · Strong understanding of frontend SEO with an ability to demonstrate SEO strategy. · Strong understanding of how WordPress plugins work and interact, manage WordPress and plugin upgrade cycles, and troubleshoot conflicts. · The ability to work independently with minimal oversight or direction is crucial for this role · Fluent English. Frontend Web Developer Job Posting.pdf

Good morning, I'm building a site with Wordpress and the Divi Builder. I have this animation in GSAP that I would like to edit. Here the original: https: //taxiboat.salone24.it/throttle-originale/ Here how I would like it: https: //taxiboat.salone24.it/throttle-mio/ The css and js files are visible at the codepen link. What I would like to have is that when I scroll the page, the white circle that masks the image, it closes completely (while now it remains a little open), and only after the circle has closed completely and has hidden the background image, only now, my module appears (the one visible in the second link / throttle-mio /). (The slide with the big image) Could you help me understand how I can do it? Many thanks Davide

Hello. I have the following working properly in a hardcoded Wordpress template, however, it seems that whenever I view the site and I'm not logged in, the Scrolltrigger events do not work/fire. I've replicated the site in Codepen but cannot replicate the issues there: https://codepen.io/neontrenton/pen/vYdOppv Does anyone have any idea why this might be happening? It seems like a Wordpress-specific issue (I have no cache/cache plugins on the site) but I don't even know where to begin troubleshooting this. Here are the scripts I'm loading into the site: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="/wp-content/themes/canvas/js/plugins/ScrollTrigger.min.js"></script> Here is an example of a ScrollTrigger event that DOES work: gsap.utils.toArray(".color-reveal").forEach((color) => { gsap.to(".color-reveal", { scrollTrigger: { trigger: color, toggleClass: "active", scrub: true, start: "top center", end: "+=100", }, }); }); Here is the specific ScrollTrigger events that DO NOT work if you aren't logged in: let containers = gsap.utils.toArray(".treatment-1"); containers.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: -500 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); }); // Treatment Two Animation let containerstwo = gsap.utils.toArray(".treatment-2"); containerstwo.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: 450 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); }); // Treatment Three Animation let containersthree = gsap.utils.toArray(".treatment-3"); containersthree.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: -500 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); });

Hello GSAP devs, We need urgent help from a senior GSAP developer with expertise in ScrollTrigger and pinning stuff. An agency was handling our website conversion from Figma and scrolling is not smooth at all, especially on mobile. There are various bugs and issues with the GSAP animation. The site is using WordPress. For scrolling we use ScrollSmoother. I’ll be sending you the animation concept video and the WP login. If you’ll need anything else feel free to ask. We have a custom theme with js files inside the theme folder (using git but at this point not using it will save us more time.) Urgent task: Making the scrolling smoother on desktop / tablet. There are also various bugs that we will explain along the way. BUDGET: We’ll pay professional rates. PayPal, Upwork etc. The most important thing is to work with the current site and make the animations smoother and fix bugs. You may prefer to estimate a fixed price for some tasks / we can go with hourly - whatever you like. After making the site ready for launch, we’ll rebuild it using Elementor and since the HTML structure will change, the animations will need some work for you if interested.. The site is on wpengine, I’ll provide the wp login along with theme files. Please send me a message if interested and can start ASAP, I’ll send you the animation concept video and the site URL and explanation on where to start. Best, Zeberet

Hi, I was trying to created some cool animations using ScrollTrigger, but it doesn't work. The animation plays once the page is loaded. This is my code: I would like to add that thanks to the activity of this forum I could integrate GSAP animations to a child theme on Wordpress.

Hello everyone, I would like to develop this kind of animation for my background. Anybody suggest me about this how can I develop this? Also how can I add liquid hover effect on images. https://s.muz.li/NzNjY2YzNGRi Thanks

Hello..! I did setup locomotive scroll with GSAP for my Wordpress Site. Currently it is running beautifully..! But the problm is that, None of my Elementor Scroll Animations are working. I am pretty new to Wordpress and Web Development. If you can help me, it would be a great pleasure. (Iam using Astra theme + Elementor Pro. I created some scroll animations for couple of Elementor sections. Everything not working. And I add my page (#page) as the locomotive scroll element.)

Hi All: The question of using GSAP in WordPress has come up several times over the years, including a couple of questions from me. I finally got around to figuring it out and I wrote a tutorial on how this can be done. If anyone has suggestions or corrections, I'd appreciate passing them along. Hopefully it will be helpful as non-WordPress GSAPers continue to want to use your fantastic library in WordPress. Thanks.

Hello, I have this entire HTML code containing CSS, SVG path, and JS. Now, my client wants to add this animated svg design in a WordPress site as a background which stay on an entire page. Each page will have it's own animated SVG. I have attached the file below of the entire code. I am fairly new to GREENSOCK and never worked with any before. I tried making a separate SVG file by copying SVG code into a new file and saving it as .svg Also, I was able to add it's CSS(in the header) and JS (to the footer). Also, I am making sure gsap.min.js is being loaded before my custom js. If I tried to copy the entire HTML content into a RAW HTML widget and it worked beautifully. But when I am trying to add .svg file as a background it doesn't show anything. Can someone help me with this? Thanks a ton! river_HOME_1.html

I have this pen working and have added the code to WordPress. The SVG is appearing but not drawing. Sorry, I don't have a live example worked up yet. I've added all the code where it needs to go. There is an existing GSAP animation so I plugged in the JS in the same file, the CSS in the stylesheet, and the drawSVG plugin link where the Tweenmax link is. I've also added the CSSPlugin link, and am not sure if that is needed. I'm using the <path> element only. The SVG image code is placed in a WordPress text widget running the newest version of WP. Funny that the image will show on the front-end but when I navigate back to the text widget the SVG code does not remain in the text widget. When I inspect for the SVG, it's code is in the html, yet there is not JS error in the console. What could I be missing? Are there any known issues with WordPress and drawSVG?

Hi there, I just started using Greensock and I wanted to directly add them into my wordpress site. But I'm facing with a rather confusing issue. I have a simple DrawSVG code that needs to be rendered in a page which works perfectly with a plain HTML file and javascript HTML: <svg id="Rays" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080"> <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about=""/> </rdf:RDF> </x:xmpmeta> <?xpacket end="w"?></metadata> <defs> <style> .cls-1 { fill: none; stroke: #fff; stroke-width: 3.79px; fill-rule: evenodd; filter: url(#filter); } </style> <filter id="filter" x="493" y="-6" width="964" height="683" filterUnits="userSpaceOnUse"> <feGaussianBlur result="blur" stdDeviation="3" in="SourceAlpha"/> <feComposite result="composite"/> <feComposite result="composite-2"/> <feComposite result="composite-3"/> <feFlood result="flood" flood-color="#ffb64d" flood-opacity="0.35"/> <feComposite result="composite-4" operator="in" in2="composite-3"/> <feBlend result="blend" mode="screen" in2="SourceGraphic"/> <feBlend result="blend-2" in="SourceGraphic"/> <feFlood result="flood-2" flood-color="#ffba60"/> <feComposite result="composite-5" operator="in" in2="SourceGraphic"/> <feBlend result="blend-3" in2="blend-2"/> </filter> </defs> <g style="fill: none; filter: url(#filter)"> <path id="path1" class="cls-1" d="M506,4l691,656,246-221" style="stroke: #fff; filter: none; fill: inherit"/> </g> </svg> Javascript: jQuery(document).ready(function(){ var t1 = new TimelineMax({repeat:-1}); t1 .from("#path1",2 ,{drawSVG:0}); }); I included the necessary greensock files using "wp_register_script" and "wp_enqueue_script". I utilized visual composers Raw HTML and JS elements to define the above code. But the animation isnt happening and there is no error on the console either. Following are my enqueue scripts: wp_register_script( 'TweenMax', get_template_directory_uri() . '/greensock/TweenMax.min.js' ); wp_register_script( 'TimeLineMax', get_template_directory_uri() . '/greensock/TimelineMax.min.js' ); wp_register_script( 'DrawSVG', get_template_directory_uri() . '/greensock/plugins/DrawSVGPlugin.min.js' ); wp_enqueue_script( 'TweenMax' ); wp_enqueue_script( 'TimeLineMax' ); wp_enqueue_script( 'DrawSVG' ); Simple Tweens such as changing filter to inherit is working fine with the SVG but animations like MorphSVG and DrawSVG seems to do nothing. Am I doing anything wrong or am I missing something. Any help would be great! Thank you in advance!

Hello, i'm trying to resolve a conflict problem with an animation I made for a website with TweenMax. With the last update of Revolution Slider the animation doesn't work anymore and I think that the GS script loaded by Revo Slider conflict with the tweenmax script i recall from my functions.php files. The browser console tell me that there is a problem with the "bezier" function: " Invalid property bezier set to {type: "cubic", values: Array(13), curviness: 1} Missing plugin? gsap.registerPlugin() - on rbtools.min.js?ver=6.0:32" Does anyone else have this problem?

Hi everyone, I need GSAP WordPress plugin. If anyone know please share here.

Hi All: I would like to install gsap into our WordPress site so I can call it from any page. For Example. In a WP page, I have <div id="myDiv"> I'm a big dumb Div</div> and in the scripts section, before the closing body tag: <script> TweenLite.from("#myDiv", 2, {opacity:0, delay:0.5}); </script> I'm using a "Functionality Plugin" which is a single plugin file which is used to organize/load custom plugins. The setup is thus: in mu-plugins/functionality-plugin.php, I have: if ( ! defined( 'FUNC_PLUGIN_URL' ) ) { define( 'FUNC_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); } include( FUNC_PLUGIN_DIR . 'includes/load_gsap.php' ); In includes/load_gsap.php, I have tried to load gsap both locally and via cdn: function theme_gsap_script() { wp_enqueue_script( 'gsap-js', FUNC_PLUGIN_URL . 'js/TweenLite.min.js', array(), false, true ); wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); Unfortunately, when I load the page, I get Uncaught ReferenceError: TweenLite is not defined Help will be appreciated!

I hope it's ok to post a remote job position here! We are a UK agency looking to employ a remote developer to add to our team to build websites that require Greensock animation. Also Wordpress on the backend. Initially we are looking at a 3 month engagement with a view to permanent. Drop me an email if you might be interested - [email protected]

Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });

OK, so I've properly enqueued TweenMax.min.js in my Wordpress install, in my child theme's functions.php file. It's loaded, as a check of the page shows. Just to make sure it's working, I added this test code to a page's footer code: <script type="text/javascript"> var blinkText = document.getElementsByClassName("blinking"); function blink() { TweenMax.to(blinkText, 0.3, { autoAlpha: 0, delay: 0.3, onComplete: function() { TweenMax.to(blinkText, 0.3, { autoAlpha: 1, delay: 0.3, onComplete: blink }); } }); } blink(); </script> When this page loads, the text doesn't blink and the DOM inspector shows an error, reporting "Uncaught ReferenceError: TweenMax is not defined." I don't have much JS experience, but obviously I've missed something simple, and obvious. Can someone help me out here? TIA! SOLVED: Ach, what a pain. It was just a case of script loading and timing. I changed the example code to what I pasted in below, and it works fine in WP, via the OH Add Script Header Footer plug. This plug makes it simple to add things like GSAP scripts on a per-page basis without having to create separate files in the WP child theme. <script type='text/javascript'> // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, stylesheets, JS, and links) window.onload = function() { //fade out and set visibility:hidden TweenMax.to(blinking, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenMax.to(blinking, 2, {autoAlpha:1, delay:2}); }; }); </script>

After 4 hours of trying to get GSAP running on a Wordpress site I have to ask for help. Whenever I used GSAP in the past I called the needed js files in the footer. The new project by a friend of mine has all the js files enqueued in the functions php. I just added TweenMax and my customs.js. Both of them are self hosted and not called via cdn. I see no error messages and GSAP and my custom script seem to get loaded well. However, the animations are not played in the frontend and I guess I made something wrong. This is how the scripts are enqueued via functions.php: /** * Load site scripts. */ function bootstrap_theme_enqueue_scripts() { $template_url = get_template_directory_uri(); // jQuery. // if (!is_admin()) //{ // wp_deregister_script('jquery'); // Load a copy of jQuery from the Google API CDN // The last parameter set to TRUE states that it should be loaded // in the footer. //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', FALSE, '1.12.4', TRUE); // wp_enqueue_script('jquery'); // } // Bootstrap wp_enqueue_script( 'bootstrap-script', $template_url . '/js/bootstrap.min.js', array( 'jquery' ), null, true ); wp_enqueue_script( 'font-awesome', 'https://use.fontawesome.com/5d03a56eda.js', array(), null, true ); wp_enqueue_script( 'wow', $template_url . '/js/wow.min.js', array( 'jquery' ), null, true ); //wp_enqueue_script( 'js-cookie', $template_url . '/js/js.cookie.min.js', array(), null, true ); wp_enqueue_script( 'js-functions', $template_url . '/js/functions.js', array( 'jquery' ), null, true ); wp_enqueue_script( 'gsap-js', $template_url . '/js/TweenMax.min.js', array(), false, true ); wp_enqueue_script( 'css-plugin', $template_url . '/js/CSSPlugin.min.js', array(), false, true ); wp_enqueue_script( 'split-text', $template_url . '/js/SplitText.min.js', array(), false, true ); wp_enqueue_script( 'draw-svg', $template_url . '/js/DrawSVGPlugin.min.js', array(), false, true ); wp_enqueue_script( 'custom-gs', $template_url . '/js/customgs.js', array(), false, true ); if ( is_single() ) { // Carousel wp_enqueue_script( 'jcarousel-script', $template_url . '/js/jquery.jcarousel.js', array( 'jquery' ), null, true ); wp_enqueue_script( 'jcarousel-responsive', $template_url . '/js/jcarousel.responsive.js', array( 'jquery' ), null, true ); } wp_enqueue_style( 'bootstrap-style', $template_url . '/css/bootstrap.min.css' ); wp_enqueue_style( 'animate-style', $template_url . '/css/animate.css' ); //wp_enqueue_style( 'ihover-style', $template_url . '/css/ihover.min.css' ); //Main Style wp_enqueue_style( 'main-style', get_stylesheet_uri() ); // Load Thread comments WordPress script. //if ( is_singular() && get_option( 'thread_comments' ) ) { // wp_enqueue_script( 'comment-reply' ); //} } add_action( 'wp_enqueue_scripts', 'bootstrap_theme_enqueue_scripts', 1 ); And this is my timeline in my customgs.js jQuery(document).ready(function($) { var $slidehead = $('.socialicons'), tl = new TimelineLite(); tl.set(".socialicons", {visibility:"visible"}) .from($slidehead, 2.5, {scale:0.2, autoAlpha: 0, ease:Back.easeIn}); }); Any help is welcome. Thank's in advance and greetings from a german GSAP noob