Run two functions at the same time

[Den2020]

123

 In the project I use plugins such as: TweenMax (v 2.1.3), ScrollMagic (v 2.0.7), gsap (v 2.0.7). There was a problem when starting 2 functions. The first is responsible for the scale of the picture. The second is the translate section with text. Picture loses ease animation when scrolling. If remove function with text, everything works good. Tell me please what the problem is. You can see the result here: http://our.com.ua/greensock/

 

function folder() {
  var controller = new ScrollMagic.Controller();
  $(".folder").each(function() {

    var tl2 = new TimelineMax();
    tl2
      .fromTo('.folder_photo', 1, {transform: 'scale(1)', ease: Linear.easeNone}, {transform: 'scale(1.6)', ease: Linear.easeNone},0)

    var scene = new ScrollMagic.Scene({
      triggerElement: this,
      triggerHook: 0.4,
      duration: "130%"
    })
    .setTween(tl2)
    .addTo(controller)


    var tl3 = new TimelineMax();
    tl3
      .fromTo('.home-text', 1, {yPercent: '-=0',padding: '2vmax 0 0vmax', ease: Linear.easeNone}, {yPercent: '-=100', padding: '10vmax 0 0vmax', ease: Linear.easeNone},0)

    var scene = new ScrollMagic.Scene({
      triggerElement: this,
      triggerHook: 0.1,
      duration: "120%",
      offset: '50%'
    })
    .setTween(tl3)
    .addTo(controller)
    .addIndicators()
    });
}

folder()

 

 

[ZachSaucier]

Hey Den2020 and welcome to the GreenSock forums! There's nothing in conflict in terms of your GSAP-related code. So that makes me think that it's a ScrollMagic issue. ScrollMagic isn't a GreenSock product and we don't really support it here so you may not get an answer, especially without providing a minimal demo.

 

11 minutes ago, Den2020 said:

I use plugins such as: TweenMax (v 2.1.3), ScrollMagic (v 2.0.7), gsap (v 2.0.7)

This doesn't make much sense. TweenMax is GSAP (pre-version 3). 

 

Best of luck with your project!

[Den2020]

Hello, I posted code on this link: 

See the Pen ZEGqPvb by Denys_Spector (@Denys_Spector) on CodePen

. 

[ZachSaucier]

Again, this seems like a ScrollMagic bug/question.

 

But you could improve your tweens:

// this
.fromTo('.folder_photo', 1, {transform: 'scale(1)', ease: Linear.easeNone}, {transform: 'scale(1.6)', ease: Linear.easeNone},0)

// should be this: ease only in the toVars, use the scale property
.fromTo('.folder_photo', 1, {scale: 1}, {scale: 1.6, ease: Linear.easeNone}, 0)

Or better yet, start at a scale below 1 and scale up to 1 (that way you don't have any blurriness caused by the image being stretched).