Jump to content
Search Community

Jean-Tilapin

Members
  • Posts

    31
  • Joined

  • Last visited

Everything posted by Jean-Tilapin

  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.
  16. Yes ! Thank you both. Thanks to the other topic and Anya's response, I changed my code to : var test = new TimelineMax({repeat: -1, repeatDelay: 3}); for(var i=0; i<nbLines; i++) { test.staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 0.5, {rotationY:'180'}, 0.1, 0); } and it does the effect I was looking for (and it's pretty awesome in my opinion ;D). Now if you look carefully, you can see that my animation resets at every loop instead of keeping spinning from Front to Back to Front again and so on. I'm sorry, this is really a beginner question, but I don't even understand why it does that, so I can't correct it by myself. What should I add ? Or in what direction should I look for the answer ?
  17. No results yet : I tried this : var test = new TimelineMax({paused:true, repeat: -1}).add("start", 0); $('.grid-line').each(()=>{ test.staggerTo(".hexagon-inner", 0.5, {rotationY:'180'}, 0.2, 'start'); }); $('.logo-container').click(function(){ test.play(); }) And still, each line waits for the previous animation to end before start. And I'm noticing another wrong behavior - obviously my fault - but I could need some help to fix that too : On repeat, I was expecting the hexagon to flip again and return to its first state. Instead, once the tiles are all flipped, bug : - tiles position are brutally reset, bud badly : some tiles are half-flipped, other more or less. - then the animation restarts
  18. Hi Great Guys ! I'm facing a little problem here. I will try to publish a codepen - edit : Done - but the HTML structure and JS are quite complexe and the pen may be too hard and long to make for such a little problem. Imagine a grid of hexagon tiles, like a beehive, full width and height. Each line has its own div. A background-image in full screen width is visible. Yes it was quite a pain in the *** to adjust the background-positions on hexagons, but it's done. Now each tile has a backface and when I rotate them, another full-screen image is visible. The idea is too make a "wave-like" effect, from left to right, not a tile after another, but all the tiles of a same column together. Here is an html structure sample : <div class="hexa-grid"> <div class="grid-line odd-line" data-background="home_center_bg_large.jpg" data-foreground="home_left_bg_large.jpg"> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> [etc.] </div> <div class="grid-line even-line"> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> [etc.] </div> [multiple even and odd lines] </div> The JS files generate this structure with the right amount of lines and hexagons, then put the right background at the right position on each face. Now, if I make something like : for (var line of $('.grid-line')){ var gallery = new TimelineLite(); gallery.staggerTo(".hexagon-inner", 1, {rotationY:'180'}, 0.2); } Result is the same as when I don't make the for loop : each hexagon rotates but one at a time. I'd like to start all the lines animations at the same time. How can I do that, please ? Bonus questions : - of course, the idea is to loop and restart automatically this effect every 5 or 10 seconds...? - do you think it's possible to add a third and eventually a fourth background on the invisible face between two loops of the animation ? Thank you.
  19. Oh, I see, I chose the wrong one on my codepen. Sorry. Fixed it. So, I achieved the scroll effect I wanted, but is it okay in a code-quality way ? Efficient and not too heavy for a site ? Thank you all.
  20. Thanks for your participation Visual-Q, but I'm not sure what the problem is ? Is it the "flickering, jumping jittering pinned elements bug" ? Can I help somehow ? About your script, it's a "mouse controlled" exclusively (wheel event) ? Does it work on a phone ? Edit : no, it doesn't work on a phone. I'll try to figure it out. Edit 2 : does anyone know if a touchpad on a laptop trigger this "wheelevent" ? Edit 3 : on my codepen above I've an error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.". I'm not a Codepen Pro (far from it !). What did I forget ? Because the same script works fine on local and test server (beside that touch problem). Edit 4 : I returned to the more classical version of your script, Visual-Q. Now fully "touch" compatible. But my Codepen still doesn't work, I don't know what I forgot.
  21. I may have an idea involving GSAP, but I'm not anymore on my work computer so I can't try tonight. : If my DOM structure is more classical, such as 2 divs in 1 section, divided 1/3 - 2/3, and I use the brillant script of the other topic by Visual-Q BUT I add a ".from" on y-axis for the large div, with the same time as the "up-scrollto" animation, wouldn't it work as I want ?
  22. Thanks for the fix, I didn't know about the scroll bar width ! i edited the codepen. I'll try tomorrow to ask on their forum (you mean on Github ?). Meanwhile if someone passing by can help...
  23. Hello everyone, What I'm trying to do is quite difficult to explain. The Codepen below should show you vaguely what I have in mind... I'd like to improve that base with some awesome effects : - a fullpage effect like in this topic (just start scrolling and it completes the animation thanks to scrollto plugin) But with one major difference : I'd like to trigger automatically 2 sections with a small delay, and both must be pinned together : When the user starts scrolling from the landing screen, the red column should immediately go up (like in the other topic), but the pink one below should automatically follow with a small delay : both red and pink sections must stay pinned until the user starts scrolling again. Then the green column shows up, immediately followed by the light green content, etc. Do you see what I'm trying to achieve ? Besides that, you can see an alignment problem with the pinned sections only the first time you scroll down. Once the sections have been pinned, the bug disappears. How can I fix that ? Thank you for your help ! nb : it is currently a test, I don't care about the DOM structure : if you see a better way to achieve what I want to do, you can of course suggest a different one.
  24. Hello everyone, I thought I started to better understand and use GS, but I realize I'm far from it. I started using GS to animate small stuff on my pages, like a spinning logo while the user waits, or display panels for ajax responses. My problem is that I don't know how to properly reset my animations once their mission is accomplished. Concrete example : - Notation system on an article : registered user can give a note between 1 and 5. - when the user clicks on one of the buttons, I animate the buttons while the Ajax function do its job : spinning and rotating. - when the response comes, the buttons go Up and disappear, and the response message comes from down and autoAlpha 0. - and then, I would like to reset the animations to allow my user to change his vote if he wants to. Here's my code so far : $('.note-btn').on('click', function(){ var spinningItems = $('.note-btn'), message = $('#notation-message'), spinning = new TimelineMax({paused: true, repeat: -1}), upWeGo = new TimelineLite({paused:true}); spinning .staggerTo(spinningItems, 0.5, {rotationY:360, ease: Expo.easeInOut}, 0.2) .staggerTo(spinningItems, 0.5, {rotation:360, ease: Expo.easeInOut}, 0.2); upWeGo .staggerTo(spinningItems, 0.2, {y: -50, autoAlpha: 0, ease: Expo.easeInOut}, 0.2) .to(message, 0.2, {y: -50, autoAlpha: 1, ease: Expo.easeInOut}) .to(message, 0.1, {autoAlpha: 0}, 5) .set('#notation-badge', {className:"-=opened"}); $.ajax({ [AJAX stuff : no pb with it] beforeSend: function(){ spinning.play(); }, success: function(){ $('#notation-message').find('p').text('Vote enregistré'); spinning.stop(); upWeGo.play(); } }) } var spinningItems = $('.note-btn'), message = $('#notation-message'), reset = new TimelineLite(); reset .set([spinningItems, message],{clearProps : "all"}); }); Sorry for the bad indentation. But my questions are : Am I starting to use GS correctly ? If not, how can I improve my code ? And how can I reset my animations to properly put the buttons back to their original state ? Thank you for your time.
  25. Thank you for your help and support. I finally reached my objective, using an array of determined values, which made the animation part easy. I have a new fantasy, now See you around
×
×
  • Create New...