Jump to content
Search Community

jesper.landberg last won the day on January 6 2019

jesper.landberg had the most liked content!

jesper.landberg

Premium

  • Posts

    127

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by jesper.landberg

    set progress of tween without calling callbacks/events?

    in GSAP

    Posted

    So If I have a timeline like this random example:
      

    const tl = new TimelineMax()

tl
.from(el, 1, {
  yPercent: 100
})
.addCallback(someFunction, 0.5)
.to(el, 1, {
  xPercent: 100
})


    But need to change the progress initially like:
      

    tl.progress(1).progress(0)


    How would u do this without calling the callback?

    I tried removing it from the timeline, and add it like below, but doesn't seem to work as I want?
      

    const tl = new TimelineMax({ paused: true )

tl
.from(el, 1, {
  yPercent: 100
})
.to(el, 1, {
  xPercent: 100
})

tl
.progress(1)
.progress(0)
.addCallback(someFunction, 0.5)
.play()

     

    Timeline slider - z-index & back problem

    in GSAP

    Posted

    You probs solved this already but the problem is in your prev() function, ur just setting this.data.next. It should/could look like this:

      

      prev() {
    if (this.data.animating) return
    this.data.direction = "back"
    
    this.data.next = this.data.current
    this.data.current = this.data.current == 0 ? 2 : this.data.current - 1
    
    this.slideIt()
  }

     

    Then u could just check the direction in slideIt() for example like this:
      

    const translateX = this.data.direction === 'back' ? -100 : 100


          

    • Like 3

    How to create these effects on scroll?

    in GSAP

    Posted

    26 minutes ago, TEQQED said:

    I understand the tilt effect on scroll, but what about the angle the content/image makes on scroll after a certain point: http://prntscr.com/mtw53w ?

     

    @TEQQED What I would do is create a GSAP timeline, then increase the progress of it tied to scroll.

     

    Here I created a quick demo, it doesnt have the perspective/angle, but u get the point.
     

    See the Pen 1be4b0a81ac8f1c2ddaca22f37f8ab98?editors=0010 by ReGGae (@ReGGae) on CodePen

     

    • Like 3

    How to create these effects on scroll?

    in GSAP

    Posted

    13 hours ago, smallio said:

    @jesper.landberg has been doing this exact thing. 

     

    The first version is almost exactly the effect in on that site, but I've attached a slider version done made by him as well. 

     

    See the Pen pxMJLW by ReGGae (@ReGGae) on CodePen

     

    See the Pen EEwrRp by ReGGae (@ReGGae) on CodePen

     

     

    13 hours ago, TEQQED said:

    @smallio checking it out now, thanks so much! Love this community so far, people are so helpful :)


    I need to update those demos to some fresher/better ones:P 

    Between the other code in those demos the actual logic for the effect is pretty straight forward. You just lerp the scroll value, check the diff between the new and old value... and apply that value to anything.. like a skew in this case.

    Something like the below (not tested).

      

    let scrollTarget = 0
let scrollCurrent = 0
let ease = 0.1

const skewTarget = someElement

window.addEventListener('scroll', () => {
	scrollTarget = window.scrollY
})

function render() {
	scrollCurrent += (scrollTarget - scrollCurrent) * ease

	const diff = scrollTarget - scrollCurrent
	const vel =+ diff

	skewTarget.style.transform = `skewY(${vel}deg)`

	requestAnimationFrame(render)
}

requestAnimationFrame(render)

     

    • Like 4

    Did 2.1, immediateRender default behaviour changed?

    in GSAP

    Posted

    2 minutes ago, GreenSock said:

    Yes, sort of. It was considered a "bug" (though I suppose that's arguable) that things would render immediately when the timeline was paused. Notice your timeline is initially paused, thus the from() tweens technically shouldn't render. See what I mean? 

     

    You have two options: 

    1. Don't pause the timeline initially (there's really no reason to because you call play() on the same tick). 
    2. Specify immediateRender:true in your tweens to force it. 

    To be clear, the new behavior only affects the DEFAULT value (when you don't specify immediateRender one way or the other). 

     

    Does that help? 


    Makes sense, thanks:)

    Problem with animating/reseting width

    in GSAP

    Posted

    27 minutes ago, Carl said:

    please don't post private pens. we can't fork them.

     

    is there a reason you don't just restart() the timeline?

    Please try this code 

    
const btn = document.querySelector('.js-play')
const split = new SplitText('.js-typewriter', { type: 'lines, words, chars' })

let tl = new TimelineLite({ paused: true })
  
  tl.staggerFrom(split.chars, 0.1, {
    width: 0,
    alpha: 0,
    ease: SteppedEase.config(1)
  }, 0.1)
  
function animate() {
  tl.restart();
}

btn.addEventListener('click', animate)

     

     

    also, the TextPlugin basically does all that for you with even less code:

    See the Pen GqKrxG?editors=0010 by GreenSock (@GreenSock) on CodePen

     

     

    Yeah, i can just restart unfortunaly.
    Ohhh, I didn't even know about that plugin hah. Thanks.

    • Like 1

    Problem with animating/reseting width

    in GSAP

    Posted

    Hi,

     

    I have done a super simple typewriter effect,  which works as intended, excerpt when u interrupt and restart it. The width of each char will just be correct until the previous reset point. Check the Pen to understand. If you let the whole timeline run before clicking the button, everything is fine, however, clicking it in the middle of the animation, messes up the next.

    See the Pen 17da5944201f156706391328fe7421dd by ReGGae (@ReGGae) on CodePen

    Get end boundingRect for Tween?

    in GSAP

    Posted

    23 minutes ago, GreenSock said:

    Yeah, I'm unclear about what exactly you're asking or why. Is it one element and you're trying to figure out the bounding box of the entire animation? For example, if you've got a 10x10 element that starts at coordinates 0,0 and animates 100px to the right, the bounding box would be {top:0, left:0, right:110, bottom:10}? 

     

    Like @OSUblake said, a demo would REALLY help. 

     

    @OSUblake

    Im animating tweens tied to scroll, and when doing an Y transform, the progress reaches 1 before the element of the tween is out of view. I reckon this is because in my this.elems array i'm only storing the start bounds of the elements, when I would need the end bounds. 

    Take a look at the first animated element in this demo below, and u can see what I mean. So i was thinking that in my getElems method, maybe I should put the timeline progress to 1, set the bounds, then put it back to progress 0 ?

     

    See the Pen PxrZdp by ReGGae (@ReGGae) on CodePen

     . 

    Super simple GSAP tied to scroll.

    in GSAP

    Posted

    Hi,

     

    I'm trying to create a personal little mini lib/class to handle timelines tied to scroll. Could use ScrollMagic, but wouldn't learn much from that would I?

     

    Any feedback on what is done so far? Thinking about how I would play more advanced timelines, rather than just simple fromTo's. I guess those would be best of defined in the javascript, but trying to think of an elegant solution to that, any tips? Currently I define animations through data attribute, as valid json.

    Also, is it possible to get the end bounds/rect of a timeline/tween element in advance? Or would I need to put progress(1) .. get new rect... put back to progress(0) ?
     

    See the Pen PxrZdp by ReGGae (@ReGGae) on CodePen

     

    See the Pen PxrZdp by ReGGae (@ReGGae) on CodePen

    Get drag force

    in GSAP

    Posted

    23 minutes ago, smallio said:

    @jesper.landberg Love your work man :) Seen a few things on codepen recently... not to mention how juicy the Asaro site is! 


    Thanks, appreciate it:) If you like those stuff i will probs like my next prod that is going live within a week or so, pretty proud of it:) Smoother than ever!:P

    • Like 1

    Gsap values/props from data-attribute?

    in GSAP

    Posted

    2 minutes ago, Sahil said:

    Those values get passed as string. You need to create JSON string and parse it.

      

    
<div data-from='{"yPercent": "0", "rotation": "0"}' data-to='{"yPercent": "-100", "rotation": "5", "ease": "Expo.easeOut"}'>

      

    
  const from = JSON.parse(el.dataset.from);
  const to = JSON.parse(el.dataset.to);

     

    Double quotes are important, if you don't want to use quotes, you will find some stack overflow threads with regex solutions. You can also encode JSON string from server in PHP, there will be equivalent solutions for other languages.


    There it was, thanks you:)

    Gsap values/props from data-attribute?

    in GSAP

    Posted

    Hi,

    Im trying to build out some timelines based on props and values from data-attributes. However it doesn't seem to work, and it's throwing no errors or doing nothing when i try to play or build it. What am I missing?

     

    Looks like this:

      

    <figure class="c-photos__img c-photos__img--1">
  <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut">
    <img src="/static/images/photo-1.jpg">
  </div>
</figure>
<figure class="c-photos__img c-photos__img--2">
  <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut">
    <img src="/static/images/photo-3.jpg">
  </div>
</figure>
<figure class="c-photos__img c-photos__img--3">
  <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut">
    <img src="/static/images/photo-3.jpg">
  </div>
</figure>
<figure class="c-photos__img c-photos__img--4">
  <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut">
    <img src="/static/images/photo-4.jpg">
   </div>
</figure>
<figure class="c-photos__img c-photos__img--5">
  <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut">
    <img src="/static/images/photo-5.jpg">
  </div>
</figure>


      

    this.dom.elems.forEach(el => {
  const tl = new TimelineLite({ paused: true })
  const from = el.dataset.from
  const to = el.dataset.to

  tl.fromTo(el, 1, { from }, { to })

  tl.play() // Example, this won't play or throw any error

  this.elems.push({
    tl: tl
  })
})

     

    Interupt timeline with other timeline? "smooth transition"

    in GSAP

    Posted

    33 minutes ago, mikel said:

    Hi @jesper.landberg,

     

    Take a look at this expert solution.

     

    Here a fork:

     

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

     

    Best regards

    Mikel

     

    Cool thanks, would it be possible to reverser the order of the stagger also? 0.075 -> -0.075

     

    I think maybe this is more of an issue with the first tween/timeline getting overwritten? Is there any way to interupt, but not kill the other tween so it can be played again?

    Interupt timeline with other timeline? "smooth transition"

    in GSAP

    Posted

    3 minutes ago, mikel said:

    Hi @jesper.landberg,

     

    If I understand you correctly ...

    try using tlGrab.reverse() - by default it is playing in reverse from wherever the playhead currently is.

     

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

     

    Happy tweening ...

    Mikel



    Well yeah kind off... but what I dont like when doing reverse() is the reversing of the easing functions. I would want easeOut both directions, not easeIn which it is when doing reverse. Thats why I'm doing two timelines. Do you understand?:)

    Splittext animation not running.

    in GSAP

    Posted

    20 hours ago, Carl said:

    I'm guessing that your animation might be a from() or staggerFrom() and perhaps the starting values are the same as the existing values.

     

    Unfortunately, I can't look at your full production site. However if you make a super simple reduced test case (publicly accessible) that doesn't include your protected images and stuff specific to your client then we can take a look. This reduced test case just needs enough code to replicate the issue... a single div that you populate with different text, split and animate. If you can set that up using CodePen... fantastic. I'm guessing you can probably fake the ajax calls and just call a function that simulates new text coming into the title.  Perhaps something as simple as a single H1 element and 2 buttons that change the text and trigger a new animation.

     

    Hmm. But I revert the splittext, and clear all styles from the title. And also when i switch page the title is removed from the dom, and then inserted again. I also to a fromTo, but it only sets the from values, just won't animate.
    I will see if I can get a simple demo up.

1
2
3
...
6
Page 2 of 6  
×
×
  • Create New...