Dynamic ID scrollto and target to each designated targeted id

[Louienator]

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/

[GSAP Helper]

Hi @Louienator.

 

We love helping with GSAP-related questions, but your question has nothing to do with GSAP, right? That's about php on your server. Of course anyone else is welcome to post an answer - we just want to manage expectations. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[GSAP Helper]

By the way, this looks very odd to me: 

 $( '.fp-intro__list--item' ).each( function() {
   var test = document.querySelector( '.fp-intro__btn' );
   $( test ).click( function() {

     gsap.to( window, {
       duration: 3,
       scrollTo: '#<?= strtolower( get_the_title() ); ?>',
       ease: 'expo.out'
     });
   });
 });

You're looping through a bunch of elements, but for every single one you're using the exact same selector, ".fp-intro__btn" and adding a click event handler to it. So you end up having the same element with a bunch of different click event handlers. Is that really what you want? And I assume your get_the_title() php would return the same element every time through the jQuery loop as well which seems problematic. 

 

It kinda smells to me like you've got logic/engineering issues there, almost like you're trying to do php-related loops but inside a jQuery loop, as if jQuery is gonna iterate through a php loop. That can't happen. I don't think I've ever seen someone embed php logic into a JavaScript tween like that, so I think you might want to re-think your approach. Or perhaps I'm misunderstanding something. 

[Louienator]

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/

[mvaneijgen]

I would give the elements that care clickable and [data-id="TITLE"] (eg <button class="branch-name__btn" data-id="cebu">Cebu</button> ) attribute and then get that in the Javascript code.

 

Just set the data attribute to the same value as you've given the ID of the section. Than on click get that .dataset.id using javascript and put it in a querySelector() to get the element based on that id.  This all is basic Javascript and has nothing to with GSAP, so be sure to brush up on some Javascript knowledge if you want to take your skills a step further. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening! 

 

See the Pen jOJdovx?editors=1001 by mvaneijgen (@mvaneijgen) on CodePen

[Louienator]

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.

[Louienator]

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,

[mvaneijgen]

That has nothing to do  with GSAP and it's all basic Javascript. I strongly recommend doing a few Javascript tutorials to familiarise yourself with the tool, otherwise you keep running in to the same issues. 

 

https://jsfiddle.net/ga6b9328/