GSAP + ScrollTrigger + Locomotive Scroll in Elementor (no PRO needed)

[@jorn3280]

Been searching my ass of how to create such animations in elementor. And then the king arrives. Nice job 🙏🏻

[@OoohBoi]

There you go! It was your subconscious guiding my subconscious which means that we all are the one :)

[@nicbug4861]

"Extras for Elementor" also uses TweenMax which is GSAP for scrolling effects

[@mrxyztrade]

You are the one and only on KZbin. Giving Lot Knowledge about WordPress.. Literally I very appreciate your Work.. ❤❤❤

[@OoohBoi]

Thanks buddy!

[@danplumadore647]

In a world of plug-ins and more plug-ins, you come along and show how it is very possible to achieve the level of complexity that other websites have with your knowledge, wisdom, and certainly not to forget, your generosity. Today, we have Webflow and Editor X that make the claim that they are Wordpress killers. They are good products. However, with the knowledge you share, you have proven time and again that websites made with Elementor can compete with the best of them. Thank you once again for this. Not only did it come at the right time, but it's also a game-changer.

[@user-iy2ts7re4w]

Just started to learning how to improve Elementor appearing effects, found GSAP + scrolltrigger, and found your video about how to use them both, so cool! Thanks a lot!!

[@OoohBoi]

Glad to read that you like it, it's so awesome to be able to do whatever you can think of with these columns, sections and widgets!

[@SteveHodges]

@@OoohBoi I want this on my website! Any help???

[@ErnestoCCB]

As usual, best WP content. Must-have plugin. Must-watch videos. I have spoken.

[@OoohBoi]

Wow, thanks!

[@dannygrio]

"no matter how crapy your page is " lol that was gold!!!

[@osherfreeman6189]

Oooh boi start to heat us with the big guns, I love it! P.s, we don't have to have the music in the bg, we love the white noise Keep up the great work man 🙏

[@OoohBoi]

Thanks buddy!

[@GauravSrivastv]

Oooh Boi - You are seriously a Genius! Mind-blowing experiment

[@raonejatkhan5097]

You're the kind of guy who's changing image of WordPress even i used to think we can't create complex things in WordPress but i was wrong if we applied all thr learning from you wordpress can match functionality level of complex builder like webflow

[@OoohBoi]

Thank you for a kind feedback, I appreciate it, and I'm glad to read it changes your perspective of the WordPress :)

[@Kapman247]

You're all I have been searching for on the internet

[@fissunix]

Thanks a lot for all your great tutorials ! I was able to make GSAP work but i couldn't target neither the background overlay or the background image because it seems that the markup has changed with the new flexbox container mode and it has no longer a separate class that can be targeted...

[@sameerpatelxyz]

One unique add on with unique youtube channel, great work always waiting for you videos

[@OoohBoi]

Thank you very much for a kind feedback!

[@NOALNOM]

This is a game changer! Thanks a lot Oooh boi your rock!

[@AngeloGuardia]

this epic man, you are always saving my day!

[@rimonchowdhury1289]

Need this type of videos more

[@devsheepboi]

I gonna write a coment and like this video BEFORE start watching it, cuz I'm SURE that's gonna be EPIC! cheers mate and THANKS a lot for what U doing for all of Us! :D

[@DraganMiletic]

Great tutorial! More stuff like this would be great. E.g parallax image on section or columns, different styles of ease... I try to implement some of this, but with no success. Thanks Boi!

[@OoohBoi]

OK, I guess more stuff is coming soon! In the meantime - don't give up!

[@jcwebtech]

"No matter how crappy your page actually is" :-D Anyhow, Elementor Pro ain't no "Pro" without Steroids installed!

[@krisyau1]

How the Hero picture effect is achieved, I think this will make the video hot again

[@mortomox]

the oooh boi is back with another bomb

[@claudecoteIAM]

Hang on... I've gotta go learn JavaScript... I'll be right back.

[@anirudhachakrabarty2050]

Will be waiting for you but if you start loving js then we might not see you here again 😂

[@OoohBoi]

You gonna love this one: www.javascripttutorial.net/es6/

[@konohadesign1471]

amazing video, this is really one of the best plugins for elementor. I would appreciate more code videos on how to apply JS to elementor

[@OoohBoi]

More is yet to come!

[@konohadesign1471]

@@OoohBoi Thank you. I have your Plugin on all my sites

[@WIThEMaN2]

Great vid, you are the God of Elementor/ Wordpress

[@lewyathan]

AHHHHHHHHHHHHHHHH THANK YOUUUUUUUUUUUUUUUUU (a huge fan here if it's not obvious yet :p)

[@giuseppecangiano3410]

Hello! thank you for very much! I don't understand who to make the horizontal scroll turn back to regular scroll. Which is the right way to do that? Thank you

[@DEBUGENTITY]

I really liked this video man.. Thanks for making this.. Can u make more elementor + gsap animation videos on scroll.

[@user-mn2dp8yq7f]

Absolutely Amazing Boi, thank you!

[@OoohBoi]

Any time buddy! Hopefully you're doing fine these days!

[@skipperay]

I just found a new master. Thanks a lot, booooiiii

[@OoohBoi]

Happy to help!

[@joancasanovasorce]

Great job! only one issue; i have noticed that when locomotive scroll and gsap are enabled css position:fixed does not work anymore (very usefull for headers..) any workaround ?

[@donsbullock8657]

You Did It Again!!!

[@DigitalDesigns1]

More GSAP & Elementor video. your amamzing!!

[@OoohBoi]

Will try, of course!

[@danielacelis7896]

Loving all the tools you offer with your plugin! Mega cool! I just got the last update from Steroids, however, there seems to be a bug. I am trying to implement the Glider, but instead of showing only one slide it shows one and a half, it was working great before the update, not sure what happened. Thank you!

[@OoohBoi]

What's your currently active WP theme? If not "Hello Elementor", switch to that theme at least temporarily to eliminate the theme issue. Other than that, please be sure that your website is JS errors free. You can use the developer tools of any browser to check for errors.

[@elanges93]

Awesome, liked & subscribed...

[@evangelosmallidis2297]

Hello, so is there a solution for sticky header or not? Thank you , and nice job!!! with these attributes on header works but is jiggering a little. data-scroll data-scroll-sticky data-scroll-target|.sfe-locomotive-scroll-wrapper

[@joaolucaswork]

TODAY IS MY LUCKY DAY

[@Sinanisler]

perfecto thanks

[@reinoudzuyderhoff6656]

Nice video's boi! I've been using Divi but now i'm going for elementor! I have a question: In Divi I could use the new(er) ScrollSmoother from GSAP. I did manage to make it work on Elementor, but all the animations won't be triggered by the smooth scroll but only by the actual scroll. Have you been playing with ScrollSmoother in Elementor already and/or do you know the best way to apply it to my site?

[@takeoneification]

Love these videos and the music! Great job with steroids! Im new to this, searching world wide for that image "entrence/reveal/trigger" do u got at code for or tutorial for that?:) Great job again!

[@OoohBoi]

Thanks and welcome to the club! That image reveal effect/code is in the training file, you can download it for free!

[@bySterling]

Just purchased the training files for $5!

[@pustynnyklakier4805]

I paste all code, I named my section horiscroll and horizontal scrolling doesn't work. WHATS GOIN ON>?

[@enrirapaj9545]

Hello, my question is about the slider that continues until the images finish and then scrolls down

[@wgm247]

Any news on fixes for the issues with locomotive ?

[@OoohBoi]

I suppose this one might help: imgur.com/a/uf8dYYw

[@wgm247]

@@OoohBoi thanks i will try that

[@bekind7083]

obviously I didn't understand anything when it came to programming, but the results are fck amazing. any advice how can i learn / start to learn web coding?

[@rhea2608]

I hope you can make this available for bricks too.

[@undangonlinebali1447]

the plugin not work very well on my website.... the scrool effect doesnt look smooth like your video on youtube... any suggestion??

[@Axel1665]

Can somehow trigger only one-time in the page load the scrolling animations? Nice Work!

[@user-or5np5qm5v]

hello sir, how you can do this horizontal scrolling effects in this website

[@philophuong]

Locomotive is not compatible with gallery widget - elementor pro.

[@Alerrrrrt]

It is really hard to show how build horizontal scroll?)

[@largenuts7090]

Thanks for the video! Could you please do a tutorial on how to impliment those cool gsap text entrances/animations?

[@OoohBoi]

There will be more GSAP tutorials, and maybe one of them will be dedicated to text effects.

[@Diego-sc6jo]

Hi Oooh Boi..awesome video. One question, is there a way to turn both GSAP and Locomotion scroll and have them only work on certain pages? I don't want to use it across my site but rather in some posts to show some examples etc? Cheers buddy!

[@OoohBoi]

It's not about activating and deactivating Loco Scroll and the GSAP per page, it's about "telling" them to do things for you. If you don't code for GSAP, you won't even know if it's active or not :)

[@iamwaqasdotcom]

13:22 how i can show images swupe before loading?

[@eotikurac]

what is the use case for this frankenstein monster?

[@rafaelsaldia6692]

Hello, I'm using Elementor free version with Hello theme. Which JS plugin do you recommend I use? Thank you

[@AudiblySerene]

Hey, any updates to GSAP vs the training file? I'm having padding issues with padding on my site. I'm still learning just trying to see if it's something I'm not doing correctly

[@dushantmanglurkar4996]

Looks really dope!!! Just had a question. I'm planning to implement a pop-up full page menu which uses some motion effects. Will GSAP interfere with the motion effects of popup menu?

[@OoohBoi]

GSAP/ScrollTrigger should not affect Elementor's Motion Effects, but the Locomotive Scroll will certainly do!

[@anupkaushik9370]

This can be also created by elementor animation itself too

[@pustynnyklakier4805]

If I buy it, in this files I will have also horizontal scrolling code?

[@iamwaqasdotcom]

how the images load effect got changed at the end?

[@dirkohlhausen7671]

I really NEED to learn how to code... If this all wont need self written code to be executed I would be happiest man allive ❤️

[@OoohBoi]

Well, this thing is too complex to fit the interface. And even if I do that, people will always end up being limited. Trust me, you won't waste your time learning some JS, it's not that hard, there are literally zillions of YT videos and websites out there...

[@fecc4000]

Unique and very usefull content as always. Thanks for doing this. ->> May I ask you politely to record your video in 1080p (fullHD), please. Would be really usefull. ->> Can you give me a small help, how can I use a fixed positioned widget, for example for a back to top button, when Locomotive Scroll is activated? Thanks OoohBoi.

[@OoohBoi]

Thanks! When it comes to the fixed position with the Loco Scroll, you can use "data-scroll-sticky" and the "data-scroll-target|#ID" attributes. And when it comes to the GSAP/ScrollTrigger - position:fixed should be OK, however I'd recommend using the ScrollTrigger "pin" ( greensock.com/docs/v3/Plugins/ScrollTrigger/pin ).

[@Phoenix_Arise_J]

Just by saying: That you need some JS knowledge etc.. with that music in the background plus me knowing how much creative you I get excited and come here to put a like before watching the video lol

[@OoohBoi]

Aw, that's nice! But never do that upfront, I'm getting old and rusty...

[@Phoenix_Arise_J]

@@OoohBoi Your spirit sounds young and fresh!

[@zafit02]

is it possible to create a sequence scroll image with steroids ?

[@silentphil77]

First BOOM

[@SteveHodges]

Thanks! Are you for hire?

[@SteveHodges]

I want this on my website! Any help???

[@Hyeronymus23]

Excellent Video. Thanks!. Even if I have the training file I can't make the horizontal scrolling. Could you show how to arrange the blocks in elementor?

[@OoohBoi]

Did you check for JS errors in the Console? Maybe you have to resolve something else in first place!

[@Hyeronymus23]

@@OoohBoi Yes I have an error: Failed to load resource: the server responded with a status of 404 (Not Found) ScrollToPlugin.min:1 and a warning: DevTools failed to load source map: Could not load content for ...wp-content/plugins/ooohboi-steroids-for-elementor/lib/barba/barba.umd.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[@bySterling]

So Awesome!! Do you sell any of these layouts?$

[@pustynnyklakier4805]

heeeeeyyyy, is anybody there? I bought code from U and I want to know the answer why horizontal scrolling doesn't work

[@shkarmohammed7596]

hello dear what is ID of the texts to animate

[@fatjay9402]

Thanky you

[@OoohBoi]

Thanks for watching and the support!

[@flvtube1494]

I am trying to figure out how to make locomotive scroll and gsap to work together but it is just not happening, It is about 3 days that I am trying all the possible solutions but no luck. I have downloaded the training files, studied on greensock page possible solutions but nothing. I understand that I have to syncronize the locomotive scroll with the scroll trigger from gsap but it is just not happening. This tutorial is not up to date since in here there was not yet the implementation to animate widgets directly from wp. In any cases locomotive scroll alone is working fine, gsap alone is working fine, when I put them together I can see that the starting mark and finishing mark (red and green line) do not stay put but follow the scroll, so the item directed by the gsap are not triggering, PLEASE HELP :(((((

[@OoohBoi]

No need for the LocoScroll at all. GSAP/ScrollTrigger do have "their own" smooth scroll : codepen.io/ihatetomatoes/pen/PoZLpbp . All you need is in that Codepen dude!

[@flvtube1494]

@@OoohBoi thanks for the reply, I have in fact decided to keep the gsap and ditch the loco scroll for an external smooth scroll plug-in.

[@maximilianjaenicke]

Thanks for this introduction into gsap. Sorry to bother you, but how do I import your demo page/json file? Am I missing something or do I need a 3rd party plugin to do so?

[@OoohBoi]

Hey! No problem Max :) I believe that wpcrafter provided the most complete video on that topic: kzbin.info/www/bejne/kGGWnmyJhLqYis0 . As for what else you need... it is my Elementor add-on named Steroids for Elementor. The link is in the description or simply use WordPress plugins repo to install via WP admin. Don't forget to enable the GSAP and ScrollTrigger libraries under the plugin settings. That's all.

[@maximilianjaenicke]

@@OoohBoi Okay, so I actually tried to import it as template before and it failed and I was wondering if I was doing something wrong (which I didn't). What I learned from the video you linked is that this is normal due to compatibility issues. The only way to import older templates is to downgrade Elementor itself. Such a pity.

[@OoohBoi]

@@maximilianjaenicke Agreed 100%! It is pity, it is very lame and sloppy but it definitely has to be addressed to Elementor's dev team.

[@wgm247]

Is there one central resource that explains each feature of steriodsforelementor plugin or do i search each feature on youtube? Thanks!

[@OoohBoi]

All of the SFE related videos are found on the same play list. I think so...

[@Shakib-zt2ww]

Hey I'm shakib from Bangladesh. Your plugin is lovely & this tutorial also . But if I need only this scrolling effect then what should I do?

[@OoohBoi]

If you only need the smooth scrolling then simply enable the Locomotive Scroll, that's it. Am I missing the point?

[@teuccio73]

wooooowwwwww

[@teuccio73]

WICH ARE ALL THE EFFECTS TTHAT I CAN USE WITH GSAP ? THANKS

[@jjes.studio]

Hi. This does not work correctly for containers. Would you like to share a solution for containers?

[@TUI_GOKU697]

hi, very useful video. The plugin has many cool features. But my webpage does not scroll down when I use this plugin. I tried to turn off the locomotive scroll toggle in Manage JS Libraries. That fixes the issue, but then the edit with elementor page does not load

[@OoohBoi]

Use "Hello Elementor" theme!

[@lucabruschi7696]

Hi Oooh boi, great job yours. Could you show us how to put images in Elementor for horizontal scrolling? Thanks from Italy. ps. I have no errors in the console.

[@lucabruschi7696]

Nobody can help me? @Oooh Boi

[@wgm247]

Would really love your videos in 1080p.. please?

[@OoohBoi]

We'll see...

[@mcgills4305]

Not working on my end Its breaking the viewport

[@OoohBoi]

Did you try to use "Hello Elementor" theme? At least temporarily in order to eliminate the currently active theme as a troublemaker...

[@ivaannn1000]

Hi Boi, I've been following your work for a long time and I'm thrilled. I really like this tutorial you made, but I have a couple of questions. I don't know anything about programming languages, but I'm a beginner in all this. How come I don't use Elementor pro, but I'm forced to use an alternative through the Custom Codes plugin, I'm wondering where to paste this code from the training file? Javascript I know, but I tried in Head - Opening Body - Closing Body? I try each one individually but it doesn't work ... I just can't run the animations, am I wrong somewhere? I am also interested in the location, I have offered: Frontend Backend Login Screen Everywhere Nowhere ...? I would love to try these effects, so if anyone is willing to explain to me where I am wrong, I would be very grateful. Sincerely, IB.

[@OoohBoi]

Thanks! Your questions don't have much to do with Elementor itself, this is rather how WordPress handles enqueued external libraries (and the CSS too). Essentially, you shouldn't be concerned that much because neither the GSAP nor the ScrollTrigger (Loco Scroll as well) are enqueued to Elementor editor but rather the front-end only. So, if you add your file to the "Closing Body" (a.k.a. the footer), you'll be good. The custom code that you need ( gist.github.com/oooh-boi/fe1383ebf8aa693c2c6de05fde86099c or gist.github.com/oooh-boi/85f83c44571276cbca02b70e691d26a9 ) depends on the particular libraries and checks for their availability, so you can't miss much here either way. Good luck!

[@MauroMandalari]

Hi ooohboi. Horizontal scroll dosen't work on mobile device! Witch is the problem?

[@OoohBoi]

Essentially, overflow-x: hidden is added to the BODY element (by the Loco Scroll) in order to hide the horizontal scroller that pops up every time the x position of the element is involved. It all looks ugly and jerky with the horizontal scroller. In case you don't use the Loco Scroll, you can control the horizontal scroller via Steroids: imgur.com/a/tzAFlfN

[@connectadnan4669]

Please Make videos on Woocommerce . How can we increase functionality of woo commerce store ?

[@OoohBoi]

WooCommerce is another story (PRO only) but there's definitely a bunch of room for improvements. We'll see...

[@alcatrazyx]

I think is a best plugin for elementor ever. I have issues with horizontal scroller in desktop it's ok , but in mobile view after second column everything is white color and get messy. Are have any idea for solutions? Thanks .

[@OoohBoi]

What's the mobile browser brand? As I recall it was all right in Safari and Firefox...

[@alcatrazyx]

@@OoohBoi thanks i solved the problem the reason been because by default .elementor-column is a width: 100% on brake point under 768, i fix with custom css code .elementor-column {width: 100vw;} Work fine maybe have affect over all column. I tested. When will we be able to see a tutorial for barba.js Thanks best regards!

[@jabamivevo]

can you pls explain how u were able to run it? , so basically i copy pasted the hori scroll code but i dont know where i should put the classes

[@teuccio73]

how to add reveal effect to a photo or to a widget ? Thanks in advance

[@OoohBoi]

You can find the chunk of JS code (please download the training file) that relates to the image reveal effect... look up for the "// handle clip-path images reveal" line in the JS file.

[@teuccio73]

​@@OoohBoi thanks for your fast answer ...i can do that with data scroll on locomontion ... Grazie ancora !!

[@teuccio73]

is it possible to use the gsap and locomotion classes at the same time?

[@OoohBoi]

That very tutorial explains how to do it. Not sure what that "classes" should be tho...

[@teuccio73]

@@OoohBoi When I use your file it works but if I apply scroll and gsap locomotives on a new page do I have to pay attention to something in particular? Thanks

[@OoohBoi]

@@teuccio73 If you use Elementor's Custom Code, be sure that the Display Conditions apply sitewide (Entire Site). Or at least on pages that require the custom code.

[@teuccio73]

@@OoohBoi you set it to "entire site" I'm testing everything on a local site could it be a problem?

[@vlada.bijanic]

O.B., imaš li negde uputstvo za... kzbin.info/www/bejne/mZSqoZasnpKnaqM Taj deo me zanima najviše. Hvala.

[@MauroMandalari]

HI, do you think that will do a tutorial for barba.js? Tk

[@OoohBoi]

Yes. I bet you ain't gonna like it.

[@MauroMandalari]

@@OoohBoi why?

[@lukydwisaputra5000]

Oooh Boi! love youu king! I learned much.. Could you make latest design tutorial? Please check Timothy Ricks Channel, he is webflow designer.. and can we design kinda like that in wordpress especially with elementor? It would be great!

[@OoohBoi]

All righty, I'll take a look, thanks!

[@pustynnyklakier4805]

?????????

[@awksomeid6965]

barba jss plsssss

[@OoohBoi]

At this point, Barba and Elementor are not ready to have sex. Not yet.

[@PrintWeekRussia]

Thans for big job but... IMHO it is really too similar to coding for using it in such a great visual tool as Elementor. I am sure there will be more WYSIWYG-friendly solution than just adding one code line after another. Too uncofortably and complex, sorry.

[@OoohBoi]

In the case of GSAP + ScrollTrigger, any type of interface imposes nothing but a limitation.

[@glencoe1266]

Yeah i agree, the reason why I use elementor PRO is so i can concentrate on design and proper functionality that is already built in the app, not having to spend time coding the cool stuff. I have been design and building web sites for decades and while i know simple JS, a lot of is still hard for me to grasp, my brain is not hardwired to understand code. I hate spending hours debugging and then finding out i use : instead of ; etc etc. Unfortunately all the cool stuff in the last few years like GSAP requires lots of under the hood work and a good strong understanding of coding. Experts like Ohhboi make it seem too easy, like many developers do, when the reality is coding to 99% of people is next to impossible. The video should be labelled expert because writing code from scratch for a lot of people, especially elementor users, is not easy and gets really frustrating. I know developers scoff and like to laugh at us who cant decipher code, but that's the reality and why page builders have become BIG. Designers WANT to design, not spend time writing code and elementor provides that. I wish the developers of elementor plugins would start to offer more cool things like GSAP in widget/extensions form rather than the same bullshit they have been offering for years now. But for now it seems the cool animations and scroll hacks need to be hard coded, whats the point of spending so much for a pro license when i still have to waste time writing code i don't want too but rather spend that time making beautiful designs? Not every web designer ALSO needs to be a programmer, the creativity suffers when we have to change from left to right.

[@glencoe1266]

@@OoohBoi There is always a way. Someone will figure out it soon and then charge big..like always.

[@nonsuspicious]

hi! your tutorials are awesome, but I can't figure out how to use "handle clip-path images reveal" I have set images as column backgrounds and I can't find a way to declare a column background image... How could I do that? Maybe I am overthinking it? I tried: let column = container.querySelector( '#img' ); let wrap = column.querySelector('.elementor-5 .elementor-element.elementor-element-65229d2:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-5 .elementor-element.elementor-element-65229d2 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer'); let image = wrap.style.background-image;

[@OoohBoi]

Why would you animate the column background? That's not the element but rather the element property. I mean, I'm not saying that it's impossible but it requires completely different approach than the example file...

[@nonsuspicious]

@@OoohBoi okay... but I have one more question, how do I refer to an elementor heading text? Because this doesn't seem to work... let coolTextDiv = document.querySelector('#coolText'); let coolTextCont = coolTextDiv.getElementsByClassName('.elementor-widget-container'); let coolText = coolTextCont.querySelector(h1); let coolSplitText = new SplitText(coolText);

[@OoohBoi]

@@nonsuspicious How about this: developer.mozilla.org/en-US/docs/Web/API/Node/textContent

[@nonsuspicious]

@@OoohBoi like let coolSplitText = new SplitText(coolText.textContent); ?

[@nonsuspicious]

by the way, I am trying to animate text, I don't need text as a string

[@teuccio73]

can i do something like this: ( atelierdesign.be/) with gsap + scrolling trigger ? Thanks