Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by blippar

  1. Hi everyone !


    Hope you are fine.


    I come to you because I am trying to make a carousel with images fading in / out.

    I decided to use opacity (maybe it's not the best way to do it) and JS. I succeed to do something with JQuery but the performance were a disaster. Made my browser (chrome) crash.


    Then I decided to make it with javascript and tried to realise something as light as possible (hard task).


    But, when I thought my algorithm was good I was in front of 2 problems :


    1) I don't succeed to make it infinite (not too hard to do)

    2) I have an error during a loop : Cannot tween a null target.


    I put some console.log everywhere at every stage but impossible to localise the moment where I am sending a null object to TweenLite. Dafuq


    So, as you will see in my (short) codepen, am I missing something ?



    I deeply thank you in advance for the time spend on my request.

    See the Pen gapKjJ by anon (@anon) on CodePen

  2. Hi everyone,


    hope you are fine.



    I am getting better and better with scrollMagic / gsap but when I am thinking about doing something simple, it's always giving me a hard time.


    I choose to use ScrollMagic with GSAP because I have some sprite to use with a parallax effect. Instead of losing you with too many code lines, go straight to the point,


    here is my codepen demo :



    In this example you can see a simple square that change to position fixed with new background-color.


    The thing is, at the end of the scrolling scene, I want my square to go "slowly" (1seconde animation) at the left of the screen with animation. Then it has to stay "absolute" of section if you continue on scrolling down.


    But as you know, if you scroll back you are supposed to have your animation going back, and I am lost about it.


    Thank you in advance for reading my post and maybe help me !

    See the Pen bdXqzw by anon (@anon) on CodePen

  3. Hi everyone, hope you are fine !


    I come today with a new question about tweenmax.


    I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item.


    Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function :

    TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)});

    Sooo I have 20 images in my sprite for a width of 7960px.


    The thing is, when I am rotating while scrolling, I can't do something like :


    x: "+= scrolling value". If I am not in good proportions the animation is broken.


    But in the meantime, if I scroll to a maximum position the animation has to be completed before transforming in an other object !


    So I decided that each time I scroll, I will send 1194px to x, that correspond to 3 images. But, if you scroll very slowly you won't arrive in the next image's area before the end of spinning animation!


    Do you have some idea or tips of how I can synchronize tweenmax with a scroll ?


    I am hesitating about using scroll magic but I am afraid that it will use a huge amount of time to implement / masteries.


    EDIT: here is a codepen I made.

    See the Pen VLJWrX by anon (@anon) on CodePen

  4. Hi,


    hope everyone's fine.


    I have to load and do some transformation on a 3d model .obj and after some research I found those stuffs :


    1) This super tuto from January (but it's using 3daway, and 3daway is a flash lib...)


    2) Three.js but as I am already using GSAP a lot - if possible - I would like to avoid adding an other library. And I would have to convert the .obj..



    Then, my question is quite simple, is there a way to manage external 3D objects with GSAP ?



    Thank you in advance for the time spent on my request,