Jump to content
Search Community

Check Timeline OnLoad [SOLVED]

Victor Work test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello GSAPers, I did a project here using DrawnSVGPlugin, SplitText, ScrollTo and a few others, and found a challenge:

The challenge is the dynamics of the Casting link.

I'm targeting, some Timelines that are triggered with click events on the bookmarks next to the photo.
Each indicator is linked to a Timeline, however all this content is only in one component (Home.vue); 
Example: Upon entering the Component it triggers the Timeline of Intro, which pulls a button that to the clicked triggers the Casting Timeline, there is the question:
Which way when I click on the casting button does it already enter by jumping the timeline of the intro and automatically firing the Casting Timeline?

I believe the best way would be a check to know if entering the component it is coming from an internal route or an external link, but I do not have the slightest idea how to do it.

Thank you very much in advance.

 

The project is in this link (provisional)
http://marcelocalcados.com.br/

Link to comment
Share on other sites

You mean when you are navigating on site you don't want intro to show up? If yes,

 

You can regenerate timeline using a function, if it is internal navigation, then skip the intro.

 

You can also seek() timeline from middle and play it by skipping intro.

  • Like 2
Link to comment
Share on other sites

 

After much searching on the internet, and not finding the solution,

because the document.referrer method does not work for the VueJs route system,

I ended up buying a course at Udemy that explains how to manipulate data before entering the route, so I found a solution ,

I used the .trigger () event of jQuery and inserted it into the function that is executed before entering the route.
The result is in the Snippet below.
Stay there for someone if you are interested:

 

beforeRouteEnter (to, from, next) { 
    if (from.name === 'NameOfComponent'){
        next(vm => {
            $( ".box" ).trigger( "click" );
            console.log('Veio do Vuetif')
        });
        } else {
            next();
        }
  }

 

Thx @Sahil Again.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...