Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited


Recent Profile Visitors

601 profile views

TELLO's Achievements

  1. Hi all, how can i change with timeline the backgroundColor of the PIXI.Application? const app = new PIXI.Application({ backgroundColor: 0x1099bb, resizeTo: window }); THanks
  2. I was writing not clear. Code sample is not possible with all the stuff I use. And as I was writing, simple projects working. Its not the code. I can make them total simple, just for the DIV to pin. I get only the marker. No pinning, no logs (if I try). ScrollTrigger.create({ trigger: '#content-referenzen-test', start: "top center", markers:true, pin: true }) I suggest the mix of plugins. My question was more if there is anything known. With PIXI, MotionPathPlugin, Random, Bootstrap or Swup in combination? I also used now the 3.8.0 - but still the problem. Otherwise I must start with a dummy side and add stepp by step my plugins to the time its not working anymore.
  3. Hi all, I use ScrollTrigger in lot of projects. Now I use it in a new one with GSAP PixiPlugin and the ScrollTrigger will not work. The ScrollTrigger Script somehow not working. I get the Markers on the right position... but I don't get a pin of my DIV or start the animation of the Timeline or - If I do it to test, logs in my console. I also get NO error in webpack. My TestDIV will not pin. Also without calling the timeline. I have no idea.... const tl_referenz_filter = gsap.timeline({paused: true}); tl_referenz_filter .to('#content-referenzen-test', { autoAlpha: 0, duration: 1.2, ease: "power4.in" }, 0) ScrollTrigger.create({ trigger: '#content-referenzen-test', start: "top center", markers:true, pin: true, onEnter: () => tl_referenz_filter.play(), onLeaveBack: () => tl_referenz_filter.reverse(), })
  4. Hi all, I want to make some products turning 360° with app. 30 pictures. And I love GSAP!!! Is there some samples or links to get ideas for such project with GSAP? THX TELLO
  5. @os0wski Oh I did a big mistake. In your timeline i found it. I forgot my later timeline, where I scale again. So I can set and scale like hell before without result. 🤪
  6. Hi all, I use the PIXI Plugin for some BCG pictures. How can I change the size of the image? I use it like this... but it means only the wrapper is "responsive". But the picture/image themselves is not smaller. So on small devices not nice... wrapper.width = app.screen.width; wrapper.height = app.screen.height; wrapper.append(app.view); image = PIXI.Sprite.from(bcg); image.anchor.set(0.5); image.x = app.screen.width / 2; image.y = app.screen.height / 2; image.alpha = 0; $(window).resize(function () { image.x = app.screen.width / 2; image.y = app.screen.height / 2; }); I also tried to change as test the size of the picture direct like this: image.width = 10; image.height = 20; // or image.scale.x = 0.5; image.scale.y = 0.5; But no difference. Any help?
  7. Hi all, I guess its simple what I need. I change with my timeline the color from one element via variable color_01. .to(hex_06_gradiant_0, {attr:{offset:'0'},stopColor: color_01, ease: 'power4.out'}, 0) If I call the timeline again with .play(), I want to change the value of color_01. I expected its possible to send the new color with play() like: function changeColor() { let color_01 = offset_02_01; let color_02 = offset_02_02; tl_menu_color.play(color_01, color_02); } But its not working. What is the approach to do this? PS: I found solution to put the whole timeline in a function. THX
  8. @ZachSaucier Sorry for the misunderstanding. I changed the parallax div to a frame position: relativ, overflow: hidden and inside a bigger one absolute, what I move now. So it works without any spacing. I guess it was only my primitiv way to start doing it
  9. I move just a relative element. So the way it moves faster, it creates a space. Guess i must make it absolute as a bigger picture and overflow hide in a relative container.
  10. Hi ZachSaucier, if I have 2 div and I move the top faster up to the top of viewport. gsap.to(first-div, { yPercent: -20, ease: "none", scrollTrigger: { trigger: first-div, toggleActions: "restart pause reverse pause", start: "center center", scrub: true } }) Result = the next div will move normal speed of the site. There will go a cap bigger and bigger to the second div. Is there a way to fix this in the script? Like when you pin, you get cap too and you can use the pinSpacing: false. Just asking if there is some magic code for this case too?
  11. Hi all, if I move a div with ScrollTrigger faster up. There will be space to the following div. Is there a way - like the pinSpacing: false - to get this space closed? Or must I create a container and move them too to fix this space? Thanks TELLO
  12. @ZachSaucier by the way... To add a var was my first idea. But I was not able to do this. How can I add this additional to my line, where I have my function already? onEnter: () => tl_navi_mini_ani.play(), myvar = true,
  13. Ok - I found a solution myself. I add a ID to the ScrollTrigger and I ask for isActive. Works for me....
  14. Hi all, how can I get in other function if the ST navi_second is pinned or not? ST gsap.to(navi, { scrollTrigger: { trigger: navi_second, endTrigger: "", end: () => "+=" + $(document).height(), pin: true, pinSpacing: false, onEnter: () => tl_navi_mini_ani.play(), onLeaveBack: () => tl_navi_mini_ani.reverse() } }) Here I need if pinned or not: $(navi_second).on("mouseenter", function () { console.log(navi_second.ispinned_or_not) }); THX for help TELLO