Animation Using Callback function afterSlideLoad() with silentMoveTo causes twice calling

[saadtanvir1994]

Description

I am using GSAP to animation using afterSlideLoad() with link click function to silventMoveTo() but on landing section the animation which is defined in afterSlideLoad() is repeated twice.

// Here is the anchors
 anchors: ['firstsec','teams','solutions','roadmap','footer']

afterSlideLoad: function( section, origin, destination, direction){
        //first slide of the second section
        if(section.anchor == 'firstsec' && destination.index == 0){
            alert('hslide-1 '); // alert is poping up twice 
             TweenMax.fromTo('.heading-anim h1', .5, {y: '56',opacity:0},{y:'0',opacity:1});
             TweenMax.fromTo('.section-intro p', 1, {y: '56',opacity:0},{y:'0',opacity:1});
                 }
}

$(document).on('click', '#logo', function(){
  fullpage_api.silentMoveTo('firstsec',0);
});

Alert in the call back function is poping up twice, hwo I can solve the problem?

[alvarotrigo]

Can you please provide an isolated reproduction in jsfiddle or codepen, with no CSS or JS files external to fullPage.js and the minimum amount of HTML code? Use empty sections unless strictly necessary for the reproduction.

For the reproduction you can remove the GSAP part. Just use a console.log to prove it prints twice as you said it does.

[alvarotrigo]

Unfortunately we don't check specific websites here. That's why I was asking for an isolated reproduction of the issue with no external CSS and JS to fullPage.js and the less amount of HTML and JS code possible.

Let me know when you have a codepen I can check 👍

If you need premium support you can consider getting the Business license from the fullpage.js pricing page

[saadtanvir1994]

Here is codepen

[alvarotrigo]

Can I remove the whole afterSlideLoad and the afterSlideLoad content? And add a single console.log there?

I assume I can also remove the whole CSS? And then replace the HTML for something like this?:

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
</div>

[saadtanvir1994]

Can I remove the whole afterSlideLoad and the afterSlideLoad content? And add a single console.log there?

I assume I can also remove the whole CSS? And then replace the HTML for something like this?:

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
</div>

I have provided the same and css doesnot affecting the fullpage css, so just see the console after clicking any link in top menu and then click on the bond on right side and see console then

[alvarotrigo]

Should I take that as a yes? 😄

Your HTML looks like this now:

  <header>
    <div class="container d-sm-none d-md-block pl-0">
      <div class="d-flex d-flex justify-content-between">
        <div>
          <ul id="navigation_menu">
            <li data-menuanchor="firstsec" id="menuitem1"><a href=""></a></li>
            <li  id="menuitem2"><a href="#teams">Team</a></li>
            <li data-menuanchor="solutions" id="menuitem3"><a href="#solutions">Solutions</a></li>
            <li data-menuanchor="roadmap" id="menuitem4"><a href="#roadmap">Roadmap</a></li>
            <li data-menuanchor="footer" id="menuitem5"><a href="#footer">More</a></li>
          </ul>
        </div>

      </div>
    </div>
  </header> <!-- /. Header ends -->

  <div class="logo">
    <a id="logo" >
      <h1 class="hover-show">Bond</h1>
    </a>
  </div>

  <!-- Sections Starts -->
  <div id="fullpage">
    <div class="section" id="slide0">
      <div class="slide">
        <div class="container section-intrdo">
          <div class="row">
            <div class="col-md-6">
             <h1>Bonded</h1>
             <p class="p">Bonding is a new algorithmic marriage of digital assets resulting in the formation of advanced, higher yield investment instruments. Bonded finance is the launch pad for the deployment of these exotic and experimental decentralised financial products.</p>
           </div>
           <div class="col-md-6">
             <div class="svg-img-anim">
               <!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
             <h1>Image</h1>

</div>
</div>
</div>
</div>
</div>
<div class="slide">
  <div class="container">Token</div>
</div>
<div class="slide">
  <div class="container">
    <div class="row news">News</div>
  </div>
</div>
<div class="slide" >
  <div class="container form-sec">Contact</div>
</div>
</div>
<div class="section team-sec" id="slide1">
  <div class="container">
  Team</div>
</div>
<div class="section">
  <div class="container solutions">Solutions</div>
</div>  

<div class="section" >
  <div class="container">roadmap</div>
</div>
<div class="section" id="slide3">
  <div class="container footer">Footer</div>
</div>

</div>

Trying to make things easier for me to debug ;)

[saadtanvir1994]

But actually menu and logo is important to me because those are using the silentMoveTo() function

[saadtanvir1994]

I have made the codepen more simplified regarding HTML

[alvarotrigo]

I've forked and replaced the whole HTML and removed all the CSS as well. https://codepen.io/alvarotrigo/pen/PoNyYLd?editors=1010

Can you now please replace the file you are including plugins.js for just fullpage.js? If the issue you are facing takes place without the fullpage.js extension, then you can also replace fullpage.extensions.min.js for just fullpage.js and remove the scrollHorizontally option as well.

Perhaps you might find useful to read my article regarding how to create isolated reproductions.

[saadtanvir1994]

Actually I want the scrollHorizontally to be true and second I want to use the callbacks functions with click function for handling scrolling directions is allowed on that or not.

The thing you are requesting me is totally opposite to my scenario if I will not use the horizonal scroll. your thought?

Have you seen the console on my current codepen?

[alvarotrigo]

The thing you are requesting me is totally opposite to my scenario if I will not use the horizonal scroll. your thought?

I just want to know if you can reproduce the issue without using the extension. If that's the case, we will be isolated more the problem and therefore making it easier for me to debug and find the issue.

Have you seen the console on my current codepen?

No. It is not isolated enough. I'll do when things are really isolated. However, if you do not have the time or the willing to do so you can always consider getting a Business license for premium support as I said.

[saadtanvir1994]

I have replaced the plugin.js with fullpage.js and add the jquery in order to make the button click work and regarding css there is nothing conflict with fullpage.css and Please view the console now in codepen

[alvarotrigo]

I can't see any problem with the callbacks. I've cleaned your callbacks and replaced them for a single console.log. https://codepen.io/alvarotrigo/pen/zYqmGYV?editors=1010

I try to reproduce it by clicking on the menu elements. (team, solution, roadmap...)

[saadtanvir1994]

Okay thank you I will look up my code

[saadtanvir1994]

I have checked your code and got the console twice on returning to horizontal slide using click function. See Screenshot of your Codepen. Screenshot

[saadtanvir1994]

@alvarotrigo Waiting for your response, I need to deliver the project

[alvarotrigo]

Steps to reproduce?

[saadtanvir1994]

Means?

[alvarotrigo]

Detail the step by step instructions on how to reproduce your problem. For example

1- Load the page 2- Click the red button 3- See the console.

[saadtanvir1994]

1- Load the page. 2- Go to any other section using menu items (actually using silentMoveTo function). 3- Then click on Logo (Bond Finance) to get to the horizontal slide section 0. (so every logic in if statement having anchor= firstsec and index= 0 is called twice)

[alvarotrigo]

Ok thanks for that! I was able to reproduce it. I'll mark it as a bug for further investigation.

[saadtanvir1994]

OKay thank you but for now can I do it to repeat once as I need to deliver the project after 3 hours, so any suggestion to prevent that ?

[alvarotrigo]

See my article here. You can apply the exact same logic on your afterSlideLoad.

[alvarotrigo]

Fixed in v4: https://codepen.io/alvarotrigo/pen/XWYMZbG?editors=1010