Jump to content
Search Community

Jean-Tilapin

Members
  • Posts

    31
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Jean-Tilapin's Achievements

  1. Thank you Cassie, you killed it! Litterally! Congratulations! Thank you for your patience and your dedication!
  2. There's so much I don't understand, that's sooo annoying. And I'm also bothering you, I'm very sorry. That was obviously not my goal at all. - I don't get why in your code the iteration variable should not be equal to 1 each time (in fact, I console logged it, and I only get 1, whatever I do) - I don't get why ScrollTrigger could be the source of that stutter problem you can witness when changing the orientation of your phone. ScrollTrigger isn't even used on that blue/red rectangle pen. - I've changed the blue/red rectangle pen to use an incrementing iteration var, and used tl.kill() instead of scrolltrigger.refresh(), without fully understanding what I was trying. And it seems to be working, the stutter disappeared, even when changing hundreds of times the windows size: but it doesn't work on the real animation, so I guess it's just pure luck. (you can comment out lines 24 to 27 to see how that kill() seems to fix the problem) Anyway, I give up, no more time to waste on understanding gsap and javascript. Back to my cave and my servers. I guess I'll replace the animation on phone with some css slideshow, it will be good enough. Thank you for your patience Cassie.
  3. Ok. Thank you Cassie. I took the time to write a new Codepen with only the flawed logic. Change a few time the size of the "result area" and you can see my problem: as Jack said, it seems that new timelines add up each time we resize and finally causes that weird effect I'm trying to avoid. So, as Jack said, I could try to kill the timeline each time the resize event is triggered, but again, I don't get how that killing process must be controlled. If anyone can guide me through that process, or has any another solution to submit, I would be really glad. Thank you and have a nice week-end https://codepen.io/Jean-Tilapin/pen/yLvEqyG?editors=1111
  4. Thank you for your intervention! I've created that "full" codepen because I took quite some time to recreate that weird image behavior and couldn't succeed. So here's the (almost) full one. Sorry. But you can see it on your own codepen: try to resize a few times the result space and you still can see that unwanted image change. About that "side quest" I mentionned: now, "changeBackground" is called at the end of every flip (onComplete). The only way I found to get the right images, is to call "whichImagesAreTheFittest" inside "changeBackground", so every 3 seconds. It seems totally unnecessary so I'm looking for another way to set (then access) the right images once when the homepage is hit, and another time on resize.
  5. Edit: Codepen on first Post is now up-to-date and functioning => well, it shows that on resize, it bugs. So, now, I may ask: at what point should the gsap be killed and restarted? Documentation is quite unclear about it. And side quest: how can I get the right images once and eventually a second time on resize? Thank you.
  6. I re-open that topic because I might encounter another problem with updating the "onCompleteParams": So far, I have this, and it's working... _animateCarousel(images){ var images = this._whichImagesAreTheFittest(); //Gets the right Images Format (mobile, tablet, portrait, landscape, etc.) var tl = gsap.timeline({repeat: -1, repeatDelay: 3, repeatRefresh: true}); tl.to(".hexagon-inner", { rotationY: '-=180', duration: 1, ease: "circ.inOut", stagger: 0.2, onStart: updateIteration, onComplete: this._changeBackgroundImage, onCompleteParams: [images] }); ScrollTrigger.create({ trigger: '.hexa-grid', end: 'bottom 50%', animation: tl, toggleActions: "play pause resume none", }) function updateIteration() { this.iteration = tl.iteration(); } } _changeBackgroundImage(images) { //We divide this.iteration by 4 and look at the last digits console.log('dans _changeBackgroundImage: ', images); ...but when I resize the window, the _animateCarousel() functions is triggered again and the last console.log is triggered twice, with two different values: the new correct set of images, but also the old one. I'm not sure that its a GSAP problem but I'm scratching my head figuring it out. Any idea why it uses two sets of values? I should update onCompleteParams, I guess, but haw can I do that? Thank you.
  7. I think I see. Thank you. The following code seems to work, but is this the best way? I easily admit that "this" scope is still tricky for me, sorry ? constructor() { this.iteration = 0; //Added } _animateBackground() { var tl = gsap.timeline({repeat: -1, repeatDelay: 5, repeatRefresh: true}); tl.to(".hexagon-inner", { rotationY: '-=180', duration: 1, ease: "circ.inOut", stagger: 0.2, onStart: updateIteration, //onCompleteParams removed onComplete: this.test, }); ScrollTrigger.create({ trigger: '.hexa-grid', end: 'bottom 50%', animation: tl, toggleActions: "play pause resume none", }) function updateIteration() { this.iteration = tl.iteration(); } } test() { //Edited in this post to remove "iteration" param console.log('from outside: '+this.iteration) }
  8. Hello there! I'm updating an old code I wrote 3 years ago that used GSAP and ScrollMagic. Now that GSAP has a Scrolltrigger function, it's time to rethink the whole app. By the way, congratulations for your new GSAP version, it's awesome and there's a lot less confusion between tweens, tweenmax, tweenlite, etc. Ok so there's my problem: Context: in a Javascript Class with constructor, managing the homepage of an App, I have a carousel (see Codepen). It has hexagons in it but that's irrelevant now ; the idea is that after the first flip, the second image is visible (so far so good). The first image that was on display is now replaced by a third image. Next flip, the third image is shown, and the second one (now on backface) must be replaced by a fourth one. Next flip, the fourth image is visible and the first image is back on the backface to be shown with the next flip. See the mechanism here? My problem: get the tl.iteration() out of the scope to pass it to the function that choses what image to put on the backface. Could you please help me please? How can I simplify the process and make it work? Thank you. export default class HomeApp { constructor() { this.initGrid(); //And a lot of other stuff } initGrid(){ //Function that calculates how to generate the carousel hexagons then calls this._animateBackground(); } _animateBackground(){ var tl = gsap.timeline({repeat: -1, repeatDelay: 5, repeatRefresh: true}); var progress = 0; tl.to(".hexagon-inner", { rotationY: '-=180', duration: 1, ease: "circ.inOut", stagger: 0.2, onStart: getProgress, onComplete: this.test,//This should be the function getting the iteration and chosing what image must be put on the backface for the next flip onCompleteParams: [progress] }); ScrollTrigger.create({ //Pauses the animation when not in viewport trigger: '.hexa-grid', end: 'bottom 50%', animation: tl, toggleActions: "play pause resume none", }) function getProgress() { progress = tl.iteration(); console.log('from inside: '+progress); //get the right iteration } } test(progress) { console.log('from outside: '+progress) //Stuck at 0 }
  9. Hi everyone, I solved my problem with a very simple - and logic - solution (that' why I love coding !). Instead of adding a scrollEvent, I just had to compare the index of what is touched in the navigation and the index of the "current" panel. If it's greater, then we scroll down. If not, up. That's all. navigate(e){ let $touched = $(e.currentTarget), target = $touched.attr('data-target'), targetId = $touched.index(), currentId = $('.current').index(), direction = ''; targetId > currentId ? direction = 'down' : direction = 'up'; TweenLite.to(window, 0.5, {scrollTo:{y:target}, onComplete: this._adjust, onCompleteParams: [direction], ease:Power2.easeOut}); } _adjust(direction){ if (direction == 'down'){ $(window).scrollTop($(window).scrollTop()+1); } else { $(window).scrollTop($(window).scrollTop()-1); } }
  10. Ok thank both of you. Greensock is definitely one of the nicest forum on the Internet So the Scrollto Plugin doesn't have a "getDirection" method or something similar ?
  11. Yes I could do that, as Mikel also said. But my users could be very confused with the auto-scroll function : on some panels there is a lot of informations to read, and if you start scrolling to center the text into the viewport - like most people do -, bam, you switch to the next panel without asking. I don't really like that. I don't think I'm the only one. But if there's no other choice, I'll do it. On the other side I really like my small _adjust function, going just one pixel down, and doing just what I want. Is there a way to simply add the scroll direction to that function, allowing to switch between one and minus one pixel ?
  12. Thank you @mikel Im' not very comfortable with the idea of de-activating the normal mousewheel scroll, but if there is no other choice... During my lunch I ran some tests and discovered that a simple function could almost do what I want : navigate(e){ let $touched = $(e.currentTarget), target = $touched.attr('data-target'); TweenLite.to(window, 0.5, {scrollTo:{y:target}, onComplete: this._adjust, ease:Power2.easeOut}); } _adjust(){ window.scrollBy(0, 1); } //[panelLock function as in the first post] A simple pixel down after the scrollto magic and the Scrollmagic Scene works (but not through the offset parameter of the plugin) ! The sticky panel gets in position (no movement seen by the user) and the callback function is triggered as it should. But sadly it only works going down, not up. Is there a way to add the scroll direction as a "onCompleteParams" ? I can't find it in the documentation (but I'm not very good at finding stuff on your forum as I missed the topics you mentioned ;))
  13. Hello everyone, and happy new year. I will update my post to add a codepen, but I can't right now. I also know that this is not the right place to talk about Scrollmagic, but my problem also concerns the excellent scrollto plugin, so... Imagine a very simple page (for a form) : half a dozen panels, all full-screen, one after the other. When you scroll up or down, each panel has a sticky effect with ScrollMagic. On the left, there are fixed indicators used to follow your progression on the form. When a panel becomes "sticky", I call a function to check various stuff on my form and light the right indicator (number "4" when you are on the fourth panel, for example). That works fine. I also want my user to touch an indicator to scroll to the right panel, using ScrollTo Plugin, and go to the right position. That works fine too. But not exactly : I always have to scroll up or down juuust a little ; the panel doesn't move, but only then, it triggers the sticky scrollmagic event, firing the necessary callback function. Of course, I want to synchronize both technics : the regular mousewheel and the scrollTo navigation. I tried to add an offset to force the missing wheelscroll, but no results so far. I had my best results when I added a callback function to the ScrollTo effect, but as this function is also called again as soon as the user scrolls a little, I shouldn't do that. My code is very basic : navigate(e){ let $touched = $(e.currentTarget), target = $touched.attr('data-target'); TweenLite.to(window, 0.5, {scrollTo:{y:target}, onComplete: this._focus, onCompleteParams: [target], ease:Power2.easeOut}); } panelLock(){ var controller = new ScrollMagic.Controller(); for (let panel of $('.panel')){ var scene = new ScrollMagic.Scene({ triggerElement: panel, triggerHook: 0, duration: '50%' }) .on('enter', function(event){ console.log(target.id);//testing stuff right here }) .setPin(panel) .addTo(controller); } } Does anyone know how I could fix that behavior ? Thank you.
  14. Oh ! Thank you Anya ! You saved my day ! The "repeatDelay" function doesn't seem to work with that code. There might be a way to add a delay somewhere, I'll figure it out (the dummy line doesn't seem to have an effect). Thanks again ! Edit : var test = new TimelineMax({ onComplete: function(){test.invalidate().restart()}}); test .to('.logo-container', 5, {x:0}); for(var i=0; i<nbLines; i++) { test .staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 1, {rotationY:'-=180', ease: Circ.easeOut}, 0.1, 0) } It works like this. Thanks everyone. Great forum, as always
  15. Thank you for your intervention. There is alreadry a codepen demo showing exactly what my problem is right in the first post of the topic.
×
×
  • Create New...