Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
yulia

Slider transitions with GSAP and Scrolling

Recommended Posts

Hello! I'm trying to apply an animation to the same element in different time lines. But it works in jumps - without a smooth transition between the states of the element.
I have a task to do animation with many elements inside one screen.
I have several scenes that need to be run by scrolling or clicking on the menu. Under the link all works approximately, as it is necessary to me. One problem is that the animation does not go smoothly from the first state to the second state and then to the third.

See the Pen PBjeyN by yuliarushay (@yuliarushay) on CodePen

 

Thanks!

 

Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

I moved your post to a new topic. You had originally replied to a thread that was over a year old.

In the future please post new topics unless your question is directly related to another recent discussion.

 

I looked at your demo but had trouble understanding what it was supposed to do.

Your demo only rendered a few black circles at the bottom of the screen and yet there was nearly 300 lines of js code.

 

It would really help if you could produce a simplified demo that clearly illustrates how one simple element is supposed to transition through the first, second and third state. Perhaps once that works correctly you can implement it on more elements in your larger project.

 

Please keep in mind that we really have to keep our support focused on the GSAP API. If there is a question about GSAP, let us know and we will be happy to help.  It is another issue though to look at a complex project that we've never seen before and try to figure out what is wrong and how to fix it. That can take hours and that just isn't something we have the resources to accommodate. 

 

 

 

 

  • Like 1
Link to post
Share on other sites

Thanks for the quick response! I do not know what's the reason, but to make the element appear, you need to move the screen splitter. Then there will be an element that needs to be changed in different scenes, but inside the same window.

http://prntscr.com/kauzbw 

Link to post
Share on other sites

Sorry, I'm a total newbie in programming and animation

Link to post
Share on other sites

It's ok that you're new. Everyone needs to start somewhere.  This project may just be a bit ambitious at the moment. I always suggest starting slow and taking small steps.

 

I looked over the demo a few times and I really don't think its something I'm able to decipher and fix, however I have one suggestion.

 

I see a few cases where you are using "-=1" as the position parameter on the first tween in a timeline

 

var timeline3 = new TimelineLite()
.to('.eqz', 1, {
  transform: "scale(3)",
  ease: Power4.easeNone
}, "-=1")
  .to('.againME', 0.5, {
    autoAlpha: 1
  }, "+=1")
.reverse();

 

That isn't good as it tells that tween to be placed at a time of -1. I think you mean to use "+=1" or no position parameter at all (same as 0).

  • Like 2
Link to post
Share on other sites

Thank you!

My employer does not care if I know how to do it or not??

This is how the project should look like as a result (these are three scenes out of six). And I did everything.

I used tweenmax and scrollmagic in my project. The problem is that the animation is gradual (elements move one by one during the scene until it reaches the trigger). 
As triggers, I use invisible divs equal to 100vh (I understand that this is a dumb way to solve the problem ?)
But I need to run the animation simply by scrolling event (Run all the animation of one scene at a time). 

That's why I found codepen example that we are discussing. How to use scrollmagic without trigger elements (using only the mouse scroll-event and click) I do not know ?

Link to post
Share on other sites

Hi @mikel Thanks for the answer!

I already did something like that: 

See the Pen MBEJWZ by yuliarushay (@yuliarushay) on CodePen

My task is to switch between scenes by clicking on the button up and down, and also on the mouse scroll.


The important part is that I animate the same element in different scenes.


The animation in my code works well only Down. If you press Up, the animation is not played backwards, but restarts.

I need the Circle to increase when you press the Down button and smoothly decrease in the opposite direction when you click on the Up button.

And I do not understand why the scroll works as it works :(

 

Can you fix my idiotic code? Thank you in advance

Link to post
Share on other sites

@mikel hello again! I've redesigned my code according to your example. And I think that I understand how to do it, so that the animation is displayed smoothly in the opposite direction (prescribe all the states in the next .to after label). BUT I still do not understand how to correctly make the  scroll. Please help!

See the Pen ZjXKgV by yuliarushay (@yuliarushay) on CodePen

 

Link to post
Share on other sites

Hi @yulia,
Here's an attempt to revise the slider variant for your purposes.

The scroll function is only limited feasible:

 

See the Pen vaejxa by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

 

 

  • Like 3
Link to post
Share on other sites

Hi @yulia and all scroll fans,


It's a bit crazy, but it's a lot of fun:

 

See the Pen LBOmRL by mikeK (@mikeK) on CodePen

 

Happy scrolling and tweening ...

Mikel

 

 

  • Like 1
  • Thanks 1
Link to post
Share on other sites

@mikel 

Jesus! This is fantastic ? Thank you!

  • Like 1
Link to post
Share on other sites

 

Dear @mikel, please help me with little problem ☺️

 

Animation stops working, if after this block

 

.to('#railsanimate', 0.5, {
  animation: 'bgscrolling .1s infinite',
  ease: Power4.easeOut
}, '-=3.5')

 

add this block
.to('#slide6train2', 0.2, {
  y: 2,
  repeat:-1,
  repeatDelay:0.5,
  yoyo: true,
  ease: Power4.easeOut
}, '-=0.2')

Somewhere here is a mistake, but I can not understand where exactly

 

This animation stops working


.to('#result', 0.8, {
  transform: 'scale(1)',
  ease: Power4.easeOut
})

Link to post
Share on other sites

Hi @yulia,

 

It would be good to judge your case and problems in a CodePen.

 

"animation: 'bgscrolling .1s infinite'" is not a GreenSock parameter.

 

"repeat: -1" lets this tween run infinitely here, it does not go on to the next tween.

 

"transform: 'scale (1)'" is not a GreenSock parameter.

 

Please take a little time for learning GSAP.

 

Best regards
Mikel

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

@mikel I do not know, in my animation all these parameters work ?

But thanks for another quick and useful advice! It was all about the infinite 'repeat: -1', I changed it to a limited number of repetitions and then the whole animation worked again.

Love you! ?

Link to post
Share on other sites

Hello! I had another question. Now the animation is playing on the scroll and on the click forward and backward.

When clicking Prev btn animation plays reverse to the label, but the employer wants the animation to start play from the label. If I change reverse() to restart(), then when I click Prev btn, the entire timeline begins playing from the very beginning not from label.

Please, help!

 

This is how the project should look like And now it looks like that, but the slides are played incorrectly on the Prev btn. They show the animation in the opposite direction, and not from the beginning of the slide/

 

$('#next').on('click', function() {
  mainPage.play();
});
$('#prev').on('click', function() {
  mainPage.reverse();
});


$('body').on('mousewheel DOMMouseScroll', function(e) {
  if (typeof e.originalEvent.detail == 'number' && e.originalEvent.detail !== 0) {
    if (e.originalEvent.detail > 0) { // Down
      mainPage.play();
    } else if (e.originalEvent.detail < 0) { // Up
      mainPage.reverse();
    }
  } else if (typeof e.originalEvent.wheelDelta == 'number') {
    if (e.originalEvent.wheelDelta < 0) { // Down
      mainPage.play();
    } else if (e.originalEvent.wheelDelta > 0) { // Up
      mainPage.reverse();
    }
  }
});

 

Link to post
Share on other sites

Hi @yulia ,

 

Again the hint: a CodePen would be very helpful.

 

You may be able to try this:

 

See the Pen LBOmRL by mikeK (@mikeK) on CodePen

 

Everything you need can also be found in the docs.
For example: .getLabelBefore ()

 

Happy tweening ...

Mikel

 

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites
On 8/8/2018 at 7:05 PM, mikel said:

Hi @yulia ,

 

Again the hint: a CodePen would be very helpful.

 

You may be able to try this:

 

See the Pen LBOmRL by mikeK (@mikeK) on CodePen

 

Everything you need can also be found in the docs.
For example: .getLabelBefore ()

 

Happy tweening ...

Mikel

 

 

Hello! One more, I hope last, question. How to add autoplay the next part in such code? I found examples only for playing different timelines :( Please, help

Link to post
Share on other sites

Hi @yulia,


Here is one possible solution - not very DRY:

 

See the Pen MqgyYO by mikeK (@mikeK) on CodePen

 

However, the scroll function should be suspended while the auto function is running!

 

Kind regards 

Mikel

 

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

привет @yulia,

 

Это выглядит хорошо.
Надеюсь, tweening - это весело.

 

...  и этот google русский понятен.

 

Привет из Гамбурга
Mikel

  • Like 1
Link to post
Share on other sites

Спасибо :) tweening - это супер! 

I made two super super cool sliders on this page using this plugin. 

Many thanks again for your help ❤️

Link to post
Share on other sites

Hi guys! Help again, please

I can not understand why this slider does not work. Here is a simplified version

See the Pen EJqVEz by yuliarushay (@yuliarushay) on CodePen

.

By clicking on the buttons, the red area should be increased or decreased. The code ignores pauses and immediately increases the red area to the size of the second slide, and then does not respond to clicks back and forth. 

What am I doing wrong? :(

 

Link to post
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.

×