Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About pkid

  • Rank

Recent Profile Visitors

195 profile views
  1. Hello everyone, Hopefully this question is relevant in the GreenSock forum. I am working on implementing the SVG Filter effect on the third demo here. Everything works fine until you insert a div on top of the container including the SVG interaction. The div on top offsets where images appear and pushes them below. The offset amount is the same as the upper div's height. Does anyone know how this might be fixed? Here is the script: { const body = document.body; const docEl = document.documentElement; const lineEq = (y2, y1, x2, x1, currentVal) =&
  2. Hey everyone, I am trying to find examples of how the effect on large headline on the top here can be achieved. The text fades in with an elastic behaviour (skew). I thought it would be easy to find a CodePen example or a piece of code somewhere but I couldn't. Can you point me in the right direction? Ideally the text would reveal with scroll. Thanks!
  3. Hello again everyone! I have managed to come up with what I have at the pen below. Somehow I am having difficulty with making them scroll in the opposite direction and the cloned list is not aligning perfectly with the original list. Any help with explaining what I am doing wrong would be much appreciated. Thanks! CodePen link
  4. Thanks so much @mikel and @ZachSaucier!! These are really helpful!
  5. I have managed to add more strips through the suggestion here. Yet I am lost as to how I can make a variation between the three so that they scroll in different directions and with different offsets. Suggestions anyone? Here is the pen: https://codepen.io/pkid/pen/KKwvrxb
  6. Thanks for the answer Zach! Will take a look at those links and share here if I have a solution.
  7. Hello everyone, Does anyone have a solution for having three different strips scrolling at different directions and with varying offsets so that they are completely unsynchronised? Here is a pen expanding on Chrysto's above which is closer to what I want to achieve stylistically: https://codepen.io/hackfin/pen/yGueb Thanks!
  8. Hello everyone, I was wondering how it would be possible to achieve the following elastic border effect around the images on the Hello Monday website. Waaark's pen here creates a somewhat similar thing but I mainly was wondering how you can, for instance, achieve a similar effect (similar to the Hello Monday website) around the edges of a grid of divs inside a flexbox. Thanks!
  9. Hey Zach! Thanks so much for the warm welcome and the pen — this is exactly what I needed! Also, excuse me for not referencing to the StackOverflow, will get some good habits when I use the forums more ?
  10. Any ideas anyone? If I have a button with the label closing-button, it has been recommended here to include the following code since it has a closing function per div, so I'll need a closing button per div. Does anyone know where this code goes and if I should take something out when I include it? [...] var tiles = document.querySelectorAll(".tile"); var closing = document.querySelectorAll(".closing-button"); for (var i = 0; i < tiles.length; i++) { addListeners(tiles[i], pages[i], closing[i]); } function addListeners(tile, page, close) { tile.addEventListener
  11. Hello everyone! I was wondering if there would be a way to add a close button to the div when it is in full screen mode so that it shrinks back to its original position by clicking only on it. Right now it shrinks back by clicking anywhere — which I want to disable. Any help would be much appreciated. Thanks ?