Jump to content
Search Community

Deka87

Members
  • Posts

    8
  • Joined

  • Last visited

Deka87's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges

4

Reputation

  1. Thank your very much! Everything makes sense now and the problem is solved without `fromTo`.
  2. Looks like using fromTo is the way to go about it. I wonder what's the underlying issue here though?
  3. 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!
  4. 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>
  5. 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!
  6. 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!
  7. 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!
  8. 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!
×
×
  • Create New...