[Try to do block reveal with "diagonal"]

 

Taking advantage of the topic I remembered from this example here, which is a bit more complete:

 

http://www.espn.com/espn/feature/story/_/id/19742921/espn-body-issue-2017#!athletes_uswomensnationalhockeyteam

[BEGINNER - Animation on elements when i leave the page]

Hello, this kind of transition between pages goes a bit beyond the resources that GSAP provides.

Looking at the source code of the site you mentioned, it is worth noting that it is using a framework based on SPA (Single Page Application), to get this done you can search on some of these frameworks, these are the most used:
 - VueJs
 - ReactJS
- AngularJs.

After achieving this you can create Tweens that animate before and leave the page and animate when you enter and you will have this same transition effect.

 

[Tween to Point (label) of Timeline. [SOLVED]]

Is this!  Perfect.

Very Thx

[Tween to Point (label) of Timeline. [SOLVED]]

Thanks @PointC,

Exactly this, there is a way for me to assign a duration time to this animation?

[Tween to Point (label) of Timeline. [SOLVED]]

Hi Gsap'ers.

Is there a way to go to a label other than just jumping?
Example: When clicking the button it goes from the current point of the timeline to the label, but keeping the tweens in sequence.

 

 

See the Pen RQxXvW by Noturnoo (@Noturnoo) on CodePen

 

[Ink transition with gsap]

I saw your question and by the way is the same concept of a project that was creating, using really the methods that @OSUblake mentioned.
There are some adjustments to be fixed, but if you have not gotten the result, it can help you.

Ps .: I used a demo video of ShutterStock because of the fluids, but you can do with images in a spriteAnimation:

 

See the Pen WdyYNN?editors=0110 by Noturnoo (@Noturnoo) on CodePen

 

[Easing to Y position set on mousemove?]

I am happy with the mention, but the merits are yours.
And I'm happiest to receive a compliment from this coming from a person who handles a lot.

Thank you

[Easing to Y position set on mousemove?]

Woow the pen used was highlighted in Codepen;)

[Easing to Y position set on mousemove?]

Wow Blake, I really appreciate how helpful you are in helping the participants in the forums,

I really do leave to ask you here after you have researched a lot and have not found any solutions and it is of extreme importance these supports that you give,

I will make an outburst here if you have someone who indentify,

I started to venture into web development about a year ago and I decided to do it myself, I never worked in an agency or any other place that had someone to give a direction on front end development.

I was learning alone as the need arose and I wanted to make my projects more interactive. And thanks to you I see that my development improves every day. Sometimes it seems kind of lazy to come here to ask you something that is simple and obvious to you. But for those who are starting it is a super challenge and every detail that you show in the code of support that you make of a horizon for those who are in search of new knowledge.

Something that maybe alone would never be able to achieve.

Thank you sincerely on behalf of all these helps that you give us, it is very Important!
Thank you..  @OSUblake @Sahil and the other moderates.

[Help for Sync Draggable, TL & Click]

Wow it was very good, congratulations.
I will study every part there to be able to implement in my Projects.
Thanks again, you are the guy <3

[Help for Sync Draggable, TL & Click]

Thanks Sahil, sure already helped enough, you could explain or point a place that talks a little about this property:
_gsTransform.x
I found it very interesting but I do not know how it works kkkk
Thanks again for the help!

[Help for Sync Draggable, TL & Click]

Hello, I'm having trouble synchronizing a progress bar with Draggable, I tried doing this simulating a Click event with Jquery, but it did not work well, I think the way improvement is using (Progress) but I did not identify which draggable function I I attribute this. Someone with a light?

See the Pen vpVNej?editors=0110 by Noturnoo (@Noturnoo) on CodePen

[Element go to middle screen and Scale to 100(vw/vh)]

Hello Gsaper's, I'm trying to make a menu with images, which to the click directs to the center of the screen, and fills the screen completely, when it is clicked again the element returns to its initial state, but I need to do this using css flexbox.
After many attempts I got to this stage.

See the Pen OzyaNd by Noturnoo (@Noturnoo) on CodePen

[Smooth Page Scroll]

ScrollMagic's TriggerHook system is used to indicate from how many percent what element is in the Viewport it will start the animation.
Example
TriggerHook: 0.8
(The element will start animating when it is 20% of the bottom of the viewport)
Since TriggerHook: 1 is equal to 100% of Viewport.
Did you get it?

[Smooth Page Scroll]

Hello Blake,

sorry for the delay, I've been working a lot these days.

First of all I want to thank you for having made some of your time available to create this,

it is very useful for me. And I'm sure I'll use it on many projects.
Just a question, is there a way for Parallax to start as soon as the element enters the viewport? For here he is cheering when he comes in half.
A solution similar to ScrollMagic's TriggerHook.

 

Cheers

[Check Timeline OnLoad [SOLVED]]

 

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.

[Check Timeline OnLoad [SOLVED]]

I'll try, and when I can, I'll tell you which method was used.

 

Thx  @Sahil

[Check Timeline OnLoad [SOLVED]]

I have never used .seek (), but according to your message I believe this is possible, do you have any idea how I can do to find out if the page input came via an internal navigation? A function maybe?

[Check Timeline OnLoad [SOLVED]]

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/

[Smooth Page Scroll]

On 25/10/2017 at 9:21 AM, OSUblake said:

Yep. That's to be expected. ScrollMagic doesn't know about the animation, and is getting the scroll position like it normally does, but that's not correct. The value ScrollMagic is using is the end value, not the current value, so it's out of sync.

 

I have some other things I need to do, but I will make a demo later on showing you how to get the smooth parallax working with that code.

 

 

 

@OSUblake

Perfect, anxious.

[Smooth Page Scroll]

 Waiting

[Smooth Page Scroll]

Blake, using his great example of smooth scroll,

got into a situation when using it along with ScrollMagic / GSAP,

I'm trying to create a parallax system in BG image,

but when it starts animating bgImage, the image gets "jumped" created an example using jQuery NiceScroll for you to see more or less the difference.

I need it to be animated along with scrolling to create the Parallax effect:

 

See the Pen eGwvop by Noturnoo (@Noturnoo) on CodePen

 

 

See the Pen RLzgjP?editors=0100 by Noturnoo (@Noturnoo) on CodePen

 

[Smooth Page Scroll]

Omg, that's right. Congratulations @OSUblake, you're a genius. 
@Sahil, thank you for reminding me, and congratulations to the Specialist status, you are worthy.

I will implement in my project and see how it will behave, when it is ready I will come back to show.

Thank you again Guys!

[Restart Timeline in Function on Click]

Hello GSAPers,
I was taking a look at the new video about Workflow with Timeline, and I tried to implement a dynamic, in which I have 3 timelines and the middle one receives different colors when clicking the button, but it is not working correctly.

I need the middle Box to start second in the masterTimeline and when I click the button it will restart the Timeline with the chosen color

See the Pen XeGzGX by Noturnoo (@Noturnoo) on CodePen

[Inconsistency between Draggable, ScrollTo & Timeline]

Obrigado @ Carl , mais acredito que o @ Sahil ,  está perto do resultado que eu preciso. Por usar uma Linha do tempo, posso atribuir várias animações em slide atual. (Thanks Sahil)

Exemplo: Quando o slide 2 está ativo, inserindo um texto animado 

 

-----

Thanks @Carl, but I believe @Sahil is closer to the result I am after. Using a timeline I can add several animations in the current slide. (Thanks Sahil)

Example: When slide 2 is active, inserting an animated text