[GSAP + PaperJS position animation]

Thank your very much! Everything makes sense now and the problem is solved without `fromTo`.

[GSAP + PaperJS position animation]

Looks like using fromTo is the way to go about it. I wonder what's the underlying issue here though?

 

 

[GSAP + PaperJS position animation]

Hi there, 

 

First of all, thanks for the amazing product! I am trying to integrate it into an existing Paper.js application to replace the original .tweenTo function (http://paperjs.org/reference/tween/). The only issue I am facing so far is the "chaining" of the position or point property animations:

 

paper.install(window)  
paper.setup(canvas);

const text = new PointText({
    point: new Point(100, 100),
    fontFamily: "sans-serif",
    fontWeight: "bold",
    fontSize: 48,
    fillColor: 'black'
});
text.content = 'Move me';



const timeline = gsap.timeline();

timeline.to(text.point, { duration: 1, x: '+=100' });
timeline.to(text.point, { delay: 1, duration: 1, x: '+=100' });

For the reason unknown to me, it moves the text back to its original position before doing the second animation (i.e. instead of going from 100 -> 200 -> 300, it goes 100 -> 200 -> 100 -> 200). Chaining other properties animation e.g. width, height, color, opacity works as expected. I tried to play with replacing point with position, combining them together, but nothing worked for me. Any help would be greatly appreciated!

See the Pen GRmPBZB?editors=0010 by yevsim (@yevsim) on CodePen

[Applying perspective transforms to SVG]

Just wanted to share that if you want to animate e.g. an image or any other SVG element that can be reproduced with HTML & CSS, you can use SVG's <foreignObject> and animate it with GSAP then. E.g.:

 

<svg>

    <foreignObject x={0} y={0} width={1920} height={1080}>

        <div xmlns="http://www.w3.org/1999/xhtml">

            <img id="img" width={1920} height={1080} src="/foo.png" />

        </div>

    </foreignObject>

</svg>

[Stack "transform: translateY" values?]

Funny. I have never recommended doing a className tween to anybody before. I was tying to avoid going down the rabbit hole of how to handle resizing, but you taught me something. I had no idea GSAP could do a percentage based transform like that! I initially tried something similar using the transform property, but it kept getting converted into a matrix. 

 

A follow up question. Could changing both values simultaneously (translate pixels and percents) possibly affect animation smoothness comparing to animating only one value (pixels or percents)? I didn't see much difference when I tried, so just in theory? Thanks in advance!

[Stack "transform: translateY" values?]

Hi Deka 87,

 

Welcome to GreenSock forum.

 

You could try the GreenSock ScrollToPlugin - see: https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

Or this pen:

See the Pen KmwZJP?editors=1010 by mikeK (@mikeK) on CodePen

 (fork the x and y values).

 

Instead of this there is a chance to tween the backgroundPositon - see: 

See the Pen aWzEaB?editors=0010 by mikeK (@mikeK) on CodePen

 

Please create a demo in CodePen (or fork the above examples) to explain your issues and questions.

 

Kind regards

Manfred

 

Sorry, I had to add that I got rid of the scrollbars in favor of overflow: hidden; on the parent container, that's why I am moving the image (with additional content) with transforms. I will include a codepen next time!

[Stack "transform: translateY" values?]

Note that GSAP does allow for percentage based translation...

TweenLite.to("img", 5, {
  y: window.innerHeight,
  yPercent: -100
});

But without getting into a more complicated resizing solution, a className tween might be the best option here.

See the Pen 23b2356c29df3a3e3e85895b89591466?editors=0010 by osublake (@osublake) on CodePen

 

.

Thanks for your answer! Although the className solution seemed to be the case, it was also very slow and laggy. While the following solution did the trick:

 

tweenY = TweenMax.to(wrapperY, 5, {
    transform: "translate3d(0,100vh,0)",
    yPercent: -100
});

Thanks!

[Stack "transform: translateY" values?]

Hi, 

 

I just came across this wonderful product and realized this is exactly what I need! I have a huge image that is x times the window size, so I want to scroll to the very bottom of it on button click. I would do so with CSS like this:

@keyframes {
    to {
        transform: translateY(-100%) translateY(100vh);
    }
}

This proved to be a crossbrowser way in CSS instead of:

transform: translateY(calc(-100% + 100vh))

.Is there any way to do so with TweenMax? I do understand that I can calculate these values in pixels and specify them explicitly:

var value = -$('img').height() + $(window).height();
var tweenDown = TweenMax.to("img", 5, {y: value});

However the advantage of the "stacked" way is that when you resize the window, it keeps the image in the same position.

 

Thanks in advance!