[Translate render issue]

It works! Thanks a lot!

[Translate render issue]

Hey there!

I have an issue on all browsers, but safari is the worst. When I use

 

gsap.from(".element", {

x: -20, // or y or yPercent, whatever

scrollTrigger: {

trigger: ".trigger",

start: "top bottom",

end: "top 50%",

scrub: 0.1

},

});

 

Elements look like this. It will disappear after repeat animation and depends on scroll speed. How can I fix it?

 

Examples: https://discoverdesignstudio.com/ (mobile version in the bottom)

https://juliaciancifoundation.org/education/ (images moving from top to bottom, text)

 

[Refreshing start/end with jq]

Hi everyone)

I so much love gsap and scrolltrigger, but I always have some issues.

 

If I create gsap.to() (doesn't matter what exactly) with jq in the start/end position, on window.resize (so on ScrollTrigger.refresh()) jq doesn't recalculating.

Also if I will use var and give another value on window.resize it doesn't work too.

gsap.to(".menu", {
    top: -2,
    scrollTrigger: {
      trigger: "html",
      start: "top top",
      end: "+=" + $(".header_wrap").height(),
      markers: false,
      scrub: true,
    },
    ease: Linear.easeNone,
  });

How can I make it responsive on window resizing? I have to create the page which will work perfect anyway. 

 

P.S.

I can't use some element like trigger, this is the most simple example for explaining. Other code and examples are more complicated and I have to use JQ there.

[Low FPS when the first animation plays.]

Hello! It is hard to help you without your code. Can you add a codeopen link or just paste the code into your message?

[Animate one element with multiple scrollTrigger tweens]

gsap.registerPlugin(ScrollTrigger);

const rectPoint1 = document.querySelector('.point1').getBoundingClientRect();

const rectPoint2 = document.querySelector('.point2').getBoundingClientRect();

 

 

 

gsap.to('.div1', {

  

  y: rectPoint1.y,

  x: rectPoint1.x,

 

  scrollTrigger: {

    trigger: ".point1",

    start: "top 30%",

    end: "bottom 30%",

    toggleActions: "play none reverse none",

    markers: true,

  }

  

})

 

 

 

gsap.fromTo('.div1', {

  

  y: rectPoint1.y,

  x: rectPoint1.x,

  

}, {  

  

  y: rectPoint2.y,

  x: rectPoint2.x,

  immediateRender: false,

  

  scrollTrigger: {

    trigger: ".point2",

[Animate one element with multiple scrollTrigger tweens]

 

Remove "scrub" and create one more scroll trigger for second animation

[Animate one element with multiple scrollTrigger tweens]

You made all right, but "start" has only "top center bottom". And your start and end were wrong

See the Pen XWMoxNZ by makssshow (@makssshow) on CodePen

[Auto scroll using scrollmagic and GSAP]

You should use gsap.utils.toArrray 

 

gsap.utils.toArray(".section").

 

It will works automatically

[New text line break pinning]

I fixed it by using default font with letters size like in the custom. The problem was in the font. Next line started because the custom font has big letter size and it loades latter then js.

[New text line break pinning]

6 hours ago, OSUblake said:

Does this not fix the issue?
 

 

 

No, it is still broken( 

[New text line break pinning]

4 minutes ago, OSUblake said:

top and bottom margin

There is no bottom margin. It doesn't help. The problem is in the number of lines

[New text line break pinning]

Hi! Here is a problem. This block moves down because text has 30% width and it has two lines. But script loads faster than text goes on the second line and the block moves down. I can't use <br/> because on mobile it will be other. How to fix it?

 

See the Pen qBrQXVY by makssshow (@makssshow) on CodePen

[Autoscrolling is lagging in safari]

I understand it. The problem happens while scrolltrigger moving to the center of section, not because scroll event doesn't stop

[Autoscrolling is lagging in safari]

Also on the whole page.  here you can see the problem better

[Autoscrolling is lagging in safari]

Hello! Here is a video from the iphone 8+. I made little swipes and autoscroll as if to be afraid of scrolling)

 

 

[Autoscrolling is lagging in safari]

Hi there! On mobile safari autoscrolling to the sections is lagging. Can you help me to fix it? 

See the Pen dyvqbOX by makssshow (@makssshow) on CodePen

[Why start and end of animation go down?]

Hi!

 

These title has animation from bottom to top inside div with overflow-Y:hidden. But after first load of the page triggers of anim go down without reasons and after reload they fix. Why it happens?

See the Pen gOmayXP by makssshow (@makssshow) on CodePen