[Dynamic ID scrollto and target to each designated targeted id]

Hi @mvaneijgen, is it also applicable if the background image changes every time you hover over an item?

 

Here is an example fiddle, but I cannot make it dynamic using PHP, just like the dataset.

https://jsfiddle.net/zxpnyj95/37/

Thank you so much,

[Page preloader with text sliding up 1 by 1]

Hi @mvaneijgen,

 

I'm not sure if I'm doing it correctly, but the items just stack up instead of showing in the same position and interchanging one by one.

Here's my fiddle: 

 

https://jsfiddle.net/zmv3gfcj/147/

Thank you @mvaneijgen

[Page preloader with text sliding up 1 by 1]

Hi, I was wondering if there is a way to make the preloader dependent on the internet speed. Alternatively, is it possible to preload the image and JS components while they are still loading, and then display the contents afterward? Also, I'd like the bar to grow horizontally from the center. Once everything is loaded, I want everything to fade out.

Here's an example of an intro from this website where the text slides 1 by 1 vertically: 
https://priyanshsingara.framer.website/

Here's my fiddle:
https://jsfiddle.net/5f1ock0w/1/

Cheers,

Louie V.

[Dynamic ID scrollto and target to each designated targeted id]

Hi @mvaneijgen,  thanks for your assistance. I have dissected your code line by line, and I now understand each block. I had planned to use jQuery to combine the PHP code.

 

Thank you so much.

[Dynamic ID scrollto and target to each designated targeted id]

Hi everyone,

 

Let me clarify what I'm trying to accomplish. I want a button that, upon being clicked, will smoothly scroll to a specific section on the page. To achieve this, I need the ID to be dynamic and outputted through the use of get_the_title().

 

In the code, there's a line that reads "<section class="screen" id="cebu">Cebu</section>". This line will be looped using PHP, or maybe just the ID will be used to make it unique. To target this specific line, I added the GSAP code.


Here's the fiddle:

https://jsfiddle.net/kwuthpbm/29/

[Dynamic ID scrollto and target to each designated targeted id]

Hi, I need help finding an online platform to run my PHP code for WordPress. I want the scrollTo ID to be dynamic and point to the exact targeted ID.

Here's my code
https://jsfiddle.net/ycm3abhn/

[Menu items not re-appearing after opening the menu again]

Hi,  i'm creating a toggle button where it'll show the menu items when the button is clicked. But the problem is that when you click it again, menu items will not appear anymore. 

Here's my fiddle:
https://jsfiddle.net/x78h0bt6/157/

[Bar will contract from left to right on the next animation]

12 minutes ago, PointC said:

I always hate to say you really don't need GSAP for that, but you really don't need GSAP for this effect. It's quite simple so just a tiny bit of CSS is all it takes. to make it work. Just my two cents. Happy tweening. 

 

 

Nice approach @PointC.. Thanks for this tip.. Will try this out and have an experiment.. I didn't know that it's achievable with just pure css.. Yey!

 

Thanks

[Bar will contract from left to right on the next animation]

Hi @Rodrigo, I think i got it. but the problem is that, whenever i hover back, the animation is not playing back. here's my fiddle

https://jsfiddle.net/hus6jbtf/50/

 

 

[Bar will contract from left to right on the next animation]

14 minutes ago, Rodrigo said:

Hi,

 

Transform origin is only useful when you're doing some specific transform on an element, so animating the width property is not affected by the transform origin property:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

 

Here is one way to achieve that using scale:

 

See the Pen

See the Pen OJqjzZO by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

 

Another option is to use Clip Path:

 

Hopefully this helps.

Happy Tweening!

hi @Rodrigo,

 

Thank you for this. i've followed your solution and, my animation didn't animate again when my cursor goes back to the text


https://jsfiddle.net/0uqhdwpb/52/

 

[Bar will contract from left to right on the next animation]

Hi, here's a demo of my code, where when you hover the text a line will expand from left to right.. now the i want the line where the mouseleave method will fire, the line will contract to width 0% from left to right again. and also the animation will repeat once the mouseenter method will trigger or once the text will be hovered.

https://jsfiddle.net/0uqhdwpb/31/

 

[Bar will contract from left to right on the next animation]

Hi here's my code on what i want to achieve.. 

https://jsfiddle.net/b12w4dkL/76/

[I'm new to GSAP and i want add a hover each item across all pages if my anchor tag or button has a class name of "primary-btn" and whenever it hovers cursor will change to view more]

hi @mvaneijgen, Good day.. I'm trying to achieve the change text color effect when hovering on the button. Are these correct?

fundRaiserColor.to(this.querySelector('.ta-fundraiser__button'), 0.6, {
                css: {
                    background: '#1DBDC7',                
                    color: 'white'
                },
                ease: 'expo.out'
              });

Thank you so much.. apologies for not putting it to fiddle though. 

 

[I'm new to GSAP and i want add a hover each item across all pages if my anchor tag or button has a class name of "primary-btn" and whenever it hovers cursor will change to view more]

Hey @mvaneijgen, Happy New Year

Me again.. Is there a way to have a multiple button with different animation that's been wrap with 1 each method because they have just the same parent class. Or refactor this or is there any approach to make my code efficient? thanks

https://jsfiddle.net/z9eLdvgh/20/

[On scroll with animation]

Hi, good day. Is this possible in GSAP where we could use a scroll to or is there a gsap plugin scroll to? and is there something i miss on my code?

 

Here's a demo:

https://jsfiddle.net/hbwLetf8/22/

 

Thank you so much

[Toggle sub-menu with fading/blurring parent when sub-menu is shown/toggle]

Thanks @mvaneijgen and @Rodrigo.. With regards to this concept, does this has the implementation with a desktop menu drop down? where you can opoen a dropdown and when another dropdown opens, the previous sub-menu will close automatically? thanks

[Different scroll trigger animations in every section entered]

Hi, good day. I don't what i did wrong but if i'll just leave 1 scrolltrigger method, scrolltrigger wil play, but if i do something like this in my fiddle, nothing happened and it's firing an error.

 

https://jsfiddle.net/d624msaj/159/

[Toggle sub-menu with fading/blurring parent when sub-menu is shown/toggle]

Hi Rodrigo,

 

i think here's what i'm referring to but when ever i click the plus, it will toggle and if i open another, the previous one closes then the current being clicked is open.  Here's my fiddle

 

https://jsfiddle.net/yhbd90kL/128/

[Toggle sub-menu with fading/blurring parent when sub-menu is shown/toggle]

Hi Good day,

 

Is that possible in GSAP that if you click/toggle the plus sign, the parent menu will be blurred or opacity: 0.4 while the sub-menu is shown? 

 

here's my fiddle:

 

https://jsfiddle.net/yhbd90kL/126/

 

Cheers,

Louie V.

[I'm new to GSAP and i want add a hover each item across all pages if my anchor tag or button has a class name of "primary-btn" and whenever it hovers cursor will change to view more]

Hi @mvaneijgen, thanks for the quick explanation on that arrow function, i've dissected line by line and what's the use and where did i go wrong.. I kind of understand a bit, slowly.

 

And lastly, i've tried a non-reverse mouse out that has different animation when the mouseleave method is triggered. i've edited your code..

 

https://jsfiddle.net/359m8qzb/5/

[I'm new to GSAP and i want add a hover each item across all pages if my anchor tag or button has a class name of "primary-btn" and whenever it hovers cursor will change to view more]

Hi @Jack and @mvaneijgen, good day. i'm just continuing with this thread coz' it's related to the topic. It's a hover but on the "go" area.

 

So, i'm applying mvaneijgen's code but, the "this.querySelector" is firing an error, "this.querySelector is not a function". Is there something that i lack? thank you so much.. here's my code

 

https://jsfiddle.net/o1fgb2cx/56/

[Button inside a toggle button will just fire once, when clicking, not displaying again whenever i click it.]

11 hours ago, Rodrigo said:

contactUs.to( '.contact-us', {
  display: 'flex',
  autoAlpha: 1
})
  .to( '.contact-us__inner', {
  autoAlpha: 1,
}, "<");

And oh, what's the use of this "<"? 

[Button inside a toggle button will just fire once, when clicking, not displaying again whenever i click it.]

1 hour ago, Rodrigo said:

Yeah IDK about that, must be something else in your HTML/CSS, as you can see in this example everything is working as expected:

 

 

 

Hopefully this helps.

Happy Tweening!

You have some different approach, and it's much cleaner in that way that you just set the animation then chop it into chunks of animation states. thank you for this.. and lastly, what's the use of the console.clear? thanks

[Button inside a toggle button will just fire once, when clicking, not displaying again whenever i click it.]

Hi Rodrigo,

 

Thanks for the solution. Glad it worked. The only reason that i'm using display none because if i'll use opacity/visibility hidden. though it doesn't show up but it still takes up the space on where it's been placed.

 

https://jsfiddle.net/tbmpxyg6/26/

 

Cheers.

[Button inside a toggle button will just fire once, when clicking, not displaying again whenever i click it.]

Good day,

 

I have a problem with regards to my burger menu has a contact us button that will fire a pop-up every time i click it. but the problem is just after clicking close, contact-us button will not fire the pop-up again. Is there anything i lack? 

 

here's a fiddle: https://jsfiddle.net/gfhbcmn8/2/

 

Cheers