[Inconsistency between Draggable, ScrollTo & Timeline]

Hi Sahil again, thanks for the support in the other question, but I'm still not an expert in javascript and I'm trying on my pace, however I caught on in this part, draggable can understand the direction but in the scrollto is not stopping in the correct place after some interactions.
This is the problem.

[Inconsistency between Draggable, ScrollTo & Timeline]

Hi, sorry for English, I'm using the translator.

What I need is to create a draggable that checks the drag direction. If it is to the right it pulls the next slide, if it goes to the left it goes to the previous slide.
I tried doing with ScrollTo, but it is not working properly.

Can you understand?

[Inconsistency between Draggable, ScrollTo & Timeline]

Hello, I'm trying to create a Draggable slide, using Timeline and ScrollTo. I want it to detect Swiper to the right it rolls to the next target, and when it rolls to the left it comes back, but when it rolls the times it passes the point and it locks. I know qye maybe this is not the best way to solve this, but within my programming level was what I got.

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

[Draggable with Snap]

Hello, I'm having a hard time doing a .hitTest with a snap, in case I need my droppable to reach the hitTest in the position of the corner element.
 

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

[Equivalent .not(this) in GSAP]

I'm doing this, working on a Draggable horizontal menu, but to a little lost, my final goal is similar to the one I set as an example.
Thanks for replying Sahill,

 

let's see if the moderators help us.

[Equivalent .not(this) in GSAP]

Hello Sahil, thank you very much, it worked perfectly. 
Now, taking advantage of not having to open another topic, I would like a light, I'm learning to use Draggable, I'd like to do something like this: Draggable with Snap in the center of the screen, and I can work with a timeline. Example: https://richard.gs/work
Is there a aglum code pen similar to this so I can study? I searched the GST YT videos but did not find anything on this level.
 

@OSUblake @Carl @GreenSock @PointC

[Equivalent .not(this) in GSAP]

Ola GSAPers, gostaria de saber uma forma de atribuir animações no hover em um elemento de uma determinada classe, enquanto os outros elementos desta classe recebe outra animação.

 

 

In this case I want to replace .animate() with a TimelineMax():

 

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

 

[gsap.Animation/ScrollMagic + Vue- CLI]

Blake, I love u Guy!  <3

 

 

Working...

[gsap.Animation/ScrollMagic + Vue- CLI]

Hello GSAP'ers

 

I'm using Vue-Cli / Webpack template and I already managed to import ScrollMagic, but when running TimelineMax with setTween

I get this error:
 

"(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js"

 

My webpack.base.config.js is configured like this:

 

var $ = require("jquery");
var ScrollMagic = require("scrollmagic");
var ScrollGsap = require('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap');
var gsap = require("gsap");

module.exports = {

...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      "TweenLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
      "TweenMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
      "TimelineLite": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
      "TimelineMax": Path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
      "ScrollMagic": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
      "animation.gsap": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
      "debug.addIndicators": Path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
    }

 

And my Component.vue is like this:

<script>
import { TweenMax, TimelineMax } from 'gsap'
import $ from 'jquery'
import ScrollMagic from 'scrollmagic'
import gsap from 'scrollmagic'


export default { mounted () { 
    TweenMax.from('#red', 5, {width: 0});

    const tlVueGsap = new TimelineMax()
    .from('#blue', 5, {width: 0})
    .to('#blue', 5, {x: 400})

const controller = new ScrollMagic.Controller();

const scene = new ScrollMagic.Scene({
        triggerElement: "#red"
    })
    .setTween(tlVueGsap)
    .addTo(controller);
    
    } //Close Mounted
                
} //Close Export Defautl
</script>

 

ScrollMagic is working, just the gsap.animation plugin that is not being imported

 

 

Any idea how to solve it?

Link of Github Project:

https://github.com/Efetivos/vue_init/blob/master/src/components/GsapTest.vue

 

Thanks Folk

 

[Pause TimelineMax + ScrollToPlugin]

@Carl Thanks Very Much <3

[Pause TimelineMax + ScrollToPlugin]

Hello GSAPers,

I need a help, I'm trying to pause each Tween inside a Timeline where I control the scrolling with ScrollToPlugin.
I need it to stop, so I can control it with the Prev / Next buttons. To toggle anchors

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

[Reverse Current & Play other Timeline on Click]

Heloo, @Dipscom

Thank you for understanding about the rs language.
Very cool exportRoot (),

I just could not understand how I can implement this. Do you have any simple examples of this working? Because I only found this example and found it to be very advanced. hahaha

See the Pen YwBKxr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Reverse Current & Play other Timeline on Click]

@Dipscom

 

Hello,

Sorry, I was using the translator, I'm Brazilian.
I already managed to do what I wanted, in my case it was to have an animation of entrance and to have another animation of exit.
Now I would like to have a way for the timeline to reverse through all the tweens and stop at the required action.
Example: https://www.reed.be/

 

 

Ai click on one of the names, it does a reverse but for the timeline at the exact point

[Reverse Current & Play other Timeline on Click]

@Carl, 

 

It worked Carl,

Now I would like to know how to mute, instead of giving a reverse, it executes a tween to exit and then run the timeline of the button clicked

 

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

 

[Reverse Current & Play other Timeline on Click]

1 hour ago, Carl said:

Por favor, veja esta publicação:

 

Thanks @Carl

I'll take a look and try to implement in my code. As soon as I have a progress, I come back to show

[Reverse Current & Play other Timeline on Click]

Hello GSAPers,
I  need a very important help.
I'd like to know the best way to make alternate transitions between Timelines. Example: I click on the Go Red button to run the red timeline, and when I click on the Go Yellow button it will reverse the current timeline and start the required timeline.

Is there a way to do this only with one Timeline?

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

[Parallax | Speed control scroll elements .]

Nothing? 

[Parallax | Speed control scroll elements .]

Hello GSAPers to know if there is a way to do this parallax effect using GSAP, the effect of slow elements when scrolling down.
Examples: 

 

http://www.loisjeans.com/es/ss2015/campaign

 

http://lookbook.quechua.com/spring-summer-2016/en/hiking

 

Thanks 

[Animation before load certain link]

@OSUblake Thanks for the answer, but I do not want to do a routing, I just want it to be done a tween before going to a certain page.

Like a timeline, first run an animation then load the page.

[Animation before load certain link]

 

What is the best way to use GSAP Animation before load a link with onClick Event?  Example: I want a 100vh DIV to do a TransformOrigin and then load a certain page.

Same does this wordpress theme using GSAP:
http://efetivos.com/

[Animation: Scale left-to-right]

Hello @Carl or anyone who can help me rs.
I'm trying to add Timeline interaction in scroll event, I want the animation to occur only when the element enters the display. I'm using ScrollMagic, but it's animating all at once. Does anyone know how to solve it?

 

See the Pen BRGxLy by anon (@anon) on CodePen

 

[SVG Draw on Edge Animate]

Hello GSAPers,

I would like to know if there is an alternative to make SVG Draw work within Adobe Edge Animate, I made a search inside the forum I found this file but it is not working, I believe it is because the EdgeCommons has been interrupted. Can you upgrade that works from this file?

GSAP SVG DRAWING AND EDGE ANIMATE.zip

[Animation: Scale left-to-right]

Thanks @Carl, every step of the way I admire GSAP more, for tools and especially for the support you give.

Taking advantage of the topic, I would like to know if you have in codepen some example of Draggable effect equal to this site, which has Axis / SNAP and scrolls only horizontally.

 

https://richard.gs

[Animation: Scale left-to-right]

Sorry for english, I'm using the translator.

Thanks @Carl for the support in the animation, but the rest of my question was about what will be the best code to nest this animation with the percentage of the page scrolled. I was using ScrollMagic, but it is inconsistent I am opting to use Jquery

[Animation: Scale left-to-right]

Hello, as you can see I'm new to the house. LOL

I am now starting to use GSAP, and have a website that I know it uses,
would like to know the best code to create this animation to load with percentage of the page, with hide in the image and show after the animation. Take the example:

 

https://www.melville-design.com (site using greensock)