Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About hendrikeng

  • Rank

Recent Profile Visitors

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

  1. Thanks a lot @mikel, i guess i might have overcomplicated things , i managed to get it working. I basically wanted to avoid doubling the code for the touch events, anyways it works so far. Thanks a again for the help const who = { trigger: [...document.getElementsByClassName('slide')], init: () => { console.log('init'); who.trigger.forEach.call(who.trigger, (el) => { el.addEventListener('mouseover', who.animateOver, false); el.addEventListener('touchstart', who.animateOver, false); }); who.trigger.forEach.call
  2. I tried to extend my code but run into a new issue. i am trying to understand how i would pass an argument to a function inside a forEach.call. I basically converted my code into an object literal and split up the functions to be more dry when i would later add more animations. The problem is, that it logs the element on load but not anymore after that, i guess its because the variable doesn't exist after the first log anymore. how would i make it work, or is the approach completely wrong and nonsense? thanks for all the help. const who = { trigger: [
  3. Thanks a lot @mikel that really helped! If anyone needs the jQuery free version of mikels pen : TweenLite.set(".page", { autoAlpha: 1, xPercent: -100 }); const page = document.querySelectorAll(".page"); const button = document.querySelectorAll(".button"); button.forEach.call(button, function(el) { el.addEventListener("mouseover", function(e) { let thisPage = this.getAttribute("id"); TweenMax.to(page, 0.2, { xPercent: -100, ease: Sine.easeInOut, onComplete: newImage }); function newImage() { TweenMax.to(thisPage, 0.8, { dela
  4. Hey there, happy new year first of all I am a bit confused with an animation i tried to achieve... i basically want to have each image separately animated and not all of them together...i tried to loop over all elements but its still animating all images together...would i need a timeline or is the approach completely wrong? const who = { trigger: [...document.querySelectorAll(".slide")], image: [...document.querySelectorAll(".slide img")], init: () => { who.trigger.forEach(element => { element.addEventListener("mouseover", who.animate
  5. Thanks Jack, i guess it would have been way better to just do it from the start if you resize the window..it should fire the animation if the logo touches the colored area, if you resize it and the logo is in the white area, the tweens should have reseted to their initial color. Anyway, i just figured while making the codepen that it is indeed scrollmagic related...the tweens do reset fine, its just the scrollmagic controller that keeps firing the tweens
  6. Thanks for the patience i guess its a bit hard to understand what i am trying to achieve. I basically have a logo that needs to change its color on mobile devices if the user scrolls over a section that has the same color as the logo. I managed to get it working, the only problem was, that the logo won't change it's color back to normal if e.g. the user changes the viewport from mobile to desktop. The second animation is just a staggerFromTo that only happens on desktop devices, since its a timeline it also worked as u described. The animation resets once u ch
  7. I got it working in an object literal, this way i am able to simply initialize the mobile animations and destroy them at specific breakpoints or similar. the only thing that i encountered is that the tweens won't reset and work again if i killed them. On a timeline i used 'timeLineLite.clear();' but since its not a timeline and i have to kill/clear all i did use TweenMax.killTweensOf .... i couldnt find anything like clearTweensOf.... or could i somehow wrap the different tweens in a timeline as well? Thanks for all the help
  8. thanks a lot for the input and the videos carl and jack. it helped and i got a bit further but i still struggle to access specific methods from outside, but i think thats more an issue of my knowledge. i will try to dive deeper and get back when i made some progress. thanks
  9. Thanks a lot Jack, its not necessary to create a new tween for each animation, i wasn't actually sure if its possible to use just the same and alter the animation? I also want to kill all the tweens it was just an example of what i tried...so would it be better to refactor the code then and just use one tween?
  10. I kinda stumbled on a similar issue, in my animation.js i have the following tweens : export const tweenChangeLogo = { enterOuter: () => { TweenMax.fromTo('.c-logo__outer', 1, { fill: '#4dabfc' }, { fill: '#fff' }); }, enterInner: () => { TweenMax.fromTo('.c-logo__inner', 1, { fill: '#fff' }, { fill: '#4dabfc' }); }, leaveOuter: () => { TweenMax.fromTo('.c-logo__outer', 1, { fill: '#fff' }, { fill: '#4dabfc' }); }, leaveInner: () => { TweenMax.fromTo('.c-logo__inner', 1, { fill: '#4dabfc' }, { fill: '#fff' }); }, }; const changeLogoTrigger = document.querySel
  11. Thanks a lot Carl, if figured there is a way more simple way...in case anyone is looking for a similar effect: const changeLogoTrigger = document.querySelectorAll('.js-change-logo'); export function changeLogo() { changeLogoTrigger.forEach((trigger) => { const sceneChangeLogo = new ScrollMagic.Scene({ triggerElement: trigger, reverse: true, triggerHook: 0.065, duration: trigger.clientHeight, }) .on('enter', () => { TweenMax.fromTo('.c-logo__outer', 1, { fill: '#4dabfc' }, { fill: '#fff' }); TweenMax.fromTo('.c-logo__inner', 1, { fill: '#fff' }, { fill: '#4dabfc' }); }) .
  12. Hey there, i am trying to reverse/change the color of a logo based on the section its in. I got it working so far but i am kinda wondering if its the right and most performant approach (i kinda guess it isn't) I basically wont to use it on different subpages and the number of sections is variable. Thanks a lot, much appreciated const controllerMobile = new ScrollMagic.Controller(); const innerStart = new TimelineLite(); const innerEnd = new TimelineLite(); const outerStart = new TimelineLite(); const outerEnd = new TimelineLite(); innerStart.to(
  13. Of course i tried it the bad way ...thanks for the heads up
  14. Thanks a lot Jack, using TimlineLite or Max throwed TimelineLite __default.a.staggerFromTo is not a function but this worked like a charm animation.tweenShowcaseDesktop.forEach((id) => { id.kill(); }); thanks for such a quick reply, much appreciated!
  15. Hey there, i tried to set up a Codepen, but unfortunately i couldn't get it work ....i am basically using webpack and es6 promises as well as enqurie.js and scrollmagic with gsap to trigger different tweens/scenes and kill them when the breakpoint is changed, unfortunately i get a animation.tweenShowcaseDesktop.kill is not a function on a specific tween. Since i am not able to make it work in codepen here is the module where i trigger the tweens and scrollmagic : I know its a very long snippet and shot , but maybe someone will spot my mistake r